Question

如何将这两个输入字段合并为一个并根据ng-switch-when值切换其值？

<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>

我的意思是，如果值为true，则显示“Option A”，如果不显示“Option B”作为值，则在一个输入字段中显示所有这些。

更新：

问题在于，当点击切换开关时，新输入字段会在旧输入字段旁边显示一秒钟，然后消失，这非常难看。我正在寻找解决这个问题的方法。

switch切换来自此处：https://github.com/xpepermint/angular-ui-switch

Answer 1

我认为问题出在您的switch指令中。根据我的理解，你的代码工作正常：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 2

尝试使用

<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>

其中ng-switch是控制器中定义的变量。根据该变量是否为真，您应该看到Option A，如果为false，您应该看到Option B

或者您可以使用ng-if之类的

<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"/>

Answer 3

在我看来，永远不需要ng-switch。 ng-if要好得多。

    <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>

angularjs ng-switch-when输入字段的值

更新：

3 个答案: