使用对象作为模型时，默认情况下不选择下拉列表

Question

我使用 javascript 对象作为 select 菜单的模型，ng-options 也有 object 作为 value 属性 .我希望根据 model 值预先选择 select menu。我的 html 代码，

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3" data-require="angular.js@*"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body data-ng-app="myApp" data-ng-controller="MyCtrl as vm">
    <select data-ng-model="vm.model" data-ng-options="option as option.studentName for option in vm.options"></select>

    <br>
    <div>Model : {{vm.model}}</div>
    <br>
    <div>Options :<br>[ <div data-ng-repeat='option in vm.options'>{{option}}</div></div>
    ]
  </body>

</html>

脚本，

// Code goes here
angular.module('myApp',[]);

angular.module('myApp').
controller('MyCtrl',MyCtrl);

function MyCtrl(){
  var vm = this;

  vm.model = {studentId:1,studentName:'Dheepan'};

  vm.options = [{studentId:1,studentName:'Dheepan'},
                {studentId:2,studentName:'Raju'}
               ];


}

Plunker 这里。我可以理解，由于 ng-model 和 option 具有不同的引用，因此默认情况下不会选择它。有什么办法吗？

Answer 1

您必须使用 option.studentId as option.studentName 为选定的 studentName 绑定 studentId。

此处更新plunker

试试这个：

<select data-ng-model="vm.model" data-ng-change="vm.changeStudent(vm.model)" data-ng-options="option.studentId as option.studentName for option in vm.options"></select>

我添加了ng-change来绑定值并显示在页面上。

Answer 2

你可以使用track by来定义with字段会发现：

<select data-ng-model="vm.model" 
    data-ng-options="option as option.studentName for option in vm.options track by option.id"></select>

（您更新的 jsfiddle：http://embed.plnkr.co/6zNpJA4AsY50bpOQwnLl/preview）

使用对象作为模型时，默认情况下不选择下拉列表

Dropdown is not selected by default when using object as model

angularjs

ng-options

angularjs-ng-options