Pre-select 选项形式 ng-options 列表

Question

我正在尝试在由 ng-options 指令生成的列表中预选一个项目。有人可以告诉我 plunker 中发生了什么吗？

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

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

中的数据

Answer 2

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>

然后你可以像这样简单地分配 selected:

  $scope.selected2 = 3;

已更新plunkr

Pre-select 选项形式 ng-options 列表

Pre-select option form ng-options list

javascript

angularjs

drop-down-menu

ng-options