angularjs ng-switch-when value of the input field

Question

How to combine these two input fields into one and just switch their values based on ng-switch-when value?

<div class="form-group">
    <label ng-switch="mymodel.toggle" class="pull-left">
        <input type="text"  value="Option A" ng-switch-when="true" disabled="disabled" />
        <input type="text" value="Option B" ng-switch-when="false" disabled="disabled" />
    </label>
    <switch class="pull-right checkbox" ng-model="mymodel.toggle" ng-init="mymodel.toggle= true" class="green"></switch>
</div>

I mean, show "Option A" for value if it is true, if not show "Option B" as the value, all this in one input field.

update :

the problem is that when the toggle switch is clicked, the new input field appears next to the old input field for a second before it disappears, which is so ugly. i am looking a way to solve this problem.

the switch toggle is taken from here: https://github.com/xpepermint/angular-ui-switch

Answer 1

In my opinion, ng-switch is never needed. ng-if is far better.

    <label ng-if="mymodel.toggle" class="pull-left">
        <input type="text"  value="Option A" ng-switch-when="true" disabled="disabled" />
    </label>
    <label ng-if="!mymodel.toggle" class="pull-left">
        <input type="text" value="Option B" ng-switch-when="false" disabled="disabled" />
    </label>

Answer 2

I think the problem is in your switch directive. To my understanding , your code works fine :s

angular.module("uiSwitch", []).directive("switch", function() {
  return {
    restrict: "AE",
    replace: !0,
    transclude: !0,
    template: function(n, e) {
      var s = "";
      return s += "<span", s += ' class="switch' + (e.class ? " " + e.class : "") + '"', s += e.ngModel ? ' ng-click="' + e.ngModel + "=!" + e.ngModel + (e.ngChange ? "; " + e.ngChange + '()"' : '"') : "", s += ' ng-class="{ checked:' + e.ngModel + ' }"', s += ">", s += "<small></small>", s += '<input type="checkbox"', s += e.id ? ' id="' + e.id + '"' : "", s += e.name ? ' name="' + e.name + '"' : "", s += e.ngModel ? ' ng-model="' + e.ngModel + '"' : "", s += ' style="display:none" />', s += '<span class="switch-text">', s += e.on ? '<span class="on">' + e.on + "</span>" : "", s += e.off ? '<span class="off">' + e.off + "</span>" : " ", s += "</span>"
    }
  }
});

var app = angular.module('testApp', ["uiSwitch"]);

app.controller('testController', function($scope) {

});

.switch {
  background: #fff;
  border: 1px solid #dfdfdf;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  overflow: visible;
  width: 52px;
  height: 30px;
  padding: 0px;
  margin: 0px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
  top: -1px;
}
/*adding a wide width for larger switch text*/

.switch.wide {
  width: 80px;
}
.switch small {
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
}
.switch.checked {
  background: rgb(100, 189, 99);
  border-color: rgb(100, 189, 99);
}
.switch.checked small {
  left: 22px;
}
/*wider switch text moves small further to the right*/

.switch.wide.checked small {
  left: 52px;
}
/*styles for switch-text*/

.switch .switch-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.switch .off {
  display: block;
  position: absolute;
  right: 10%;
  top: 25%;
  z-index: 0;
  color: #A9A9A9;
}
.switch .on {
  display: none;
  z-index: 0;
  color: #fff;
  position: absolute;
  top: 25%;
  left: 9%;
}
.switch.checked .off {
  display: none;
}
.switch.checked .on {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group" ng-App="testApp" ng-controller="testController">
  <label ng-switch="mymodel.toggle" class="pull-left">
    <input type="text" value="Option A" ng-switch-when="true" disabled="disabled" />
    <input type="text" value="Option B" ng-switch-when="false" disabled="disabled" />
  </label>
  <switch class="pull-right checkbox" ng-model="mymodel.toggle" ng-init="mymodel.toggle= true" class="green"></switch>
</div>

Answer 3

Try using

<div ng-switch="your_boolean_variable">
    <input type="text"  value="Option A" ng-switch-when="true"
            disabled="disabled"/>
    <input type="text" value="Option B" ng-switch-when="false"
            disabled="disabled"/>
</div>

Where ng-switch is the variable defined in your controller. Based on if that variable is true, you should see Option A and when false, you should see Option B

Or alternatively you can use ng-if like

<input type="text"  value="Option A" ng-if="your_boolean_variable == true"
        disabled="disabled"/>
<input type="text" value="Option B" ng-if="your_boolean_variable == false"
        disabled="disabled"/>