Question

这个plunker来自Angular ngOptions样本：

但是，我向第一个ngIf添加了select，结果是：

<div ng-if="1<2">
    Color (null not allowed):
    <select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
</div>

您可能会注意到一些有趣的事情是ngIf打破了ngModel绑定，当您更改选择时没有任何反应。

因为没有ngIf的相同代码会产生预期的结果。

请您确认这是否是角度，我的代码和/或是否有解决方法的错误？

Answer 1

如果创建子范围

，您可以将ng-parent添加到ng-options中

请参阅下文

＆＃13;

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {
  $scope.colors = [{
    name: "red"
  }, {
    name: "black"
  }]
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">

    <div ng-if="1<2">
      Color (null not allowed):
      <select ng-model="myColor" ng-options="color.name for color in $parent.colors"></select>
      <br>
    </div>

  </div>
</body>

＆＃13;

或使用控制器作为语法，即：

<强> HTML：

<body ng-app="app">
  <div ng-controller="firstCtrl as vm ">

    <div ng-if="1<2">
      Color (null not allowed):
      <select ng-model="myColor" ng-options="color.name for color in vm.colors"></select>
      <br>
    </div>

  </div>
</body>

<强> JS var app = angular.module（＆＃39; app＆＃39;，[]）;

app.controller('firstCtrl', function() {

  var vm = this;
  vm.colors = [{
    name: "red"
  }, {
    name: "black"
  }]


});

Answer 2

使用ng-if指令为其中的DOM创建一个新范围。要在父作用域上引用myColor变量，请写入ng-model =“$ parent.myColor”

<div ng-if="1<2">
    Color (null not allowed):
    <select ng-model="$parent.myColor" ng-options="color.name for color in colors"></select><br>
</div>

ng-if包装选择ng-options会破坏ngModel吗？

2 个答案: