Question

我正在尝试预选列表中由ng-options指令生成的项目。有人可以告诉我发生在发射器中的事情吗？

http://plnkr.co/edit/GTnR76HEnB5NxQRe484m?p=preview

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script>
    function MyCntrl($scope) {
      $scope.prop = {
        "type": "select",
        "name": "Service",
        "values": [{
          'name': "Service 1"
        }, {
          'name': "Service 2"
        }, {
          'name': "Service 3"
        }, {
          'name': "Service 4"
        }]
      };
      $scope.selected1 = $scope.prop.values[1]
      $scope.selected2 = {
        "name": "Service 2"
      }

    }
  </script>
</head>

<body>

  <div ng-controller="MyCntrl">
    Works <br>
  <select ng-model="selected1" ng-options="v.name for v in prop.values">
    </select> {{selected1}} <br>
    Does not work. Why? <br>
    <select ng-model="selected2" ng-options="v.name  for v in prop.values">
    </select>
    {{selected2}}
  </div>
</body>
</html>

Answer 1

Bijay Rai的陈述是正确的，但不是完整答案。

ngOption有相当复杂的表达式，你应该费心去检查documentation。如果您更改了跟踪选项对象的方式，则可以避免按照所述使用same object引用。例如，使用select as模式

<select ng-model="selected2" ng-options="v.id as v.name for v in prop.values">
</select>

然后您可以简单地分配如此选择：

  $scope.selected2 = 3;

更新了plunkr

Answer 2

$scope.prop = {
        "type": "select",
        "name": "Service",
        "values": [{
          'name': "Service 1"
        }, {
          'name': "Service 2"
        }, {
          'name': "Service 3"
        }, {
          'name': "Service 4"
        }]
      };

ng-options 从 prop.values 获取数据.... 所以 selected1 正在运行，因为它被预定义为 $ scope.prop.values [1]

而 selected2 并不是指 prop.values 中的数据.....

预选选项形成ng-options列表

2 个答案: