Question

我在使用ng-model下拉框时遇到问题，并且在仍然可以使用下拉列表时更改下拉列表的索引。

例如，我可以使用此代码（http://jsfiddle.net/Q5hd6/357/）更改下拉列表的索引。但是，当我更改索引时，它默认返回空选择，然后拒绝让我选择其他任何内容。

HTML：

<select ng-model="RecievedSelect" ng-options="item.id as item.name for item in RecievedOptions"></select>
<button ng-click="ChangeIndex()">Change index</button>

JS：

    $scope.RecievedOptions  = [
                              {id : 0, name: "No"}, 
                              {id : 1, name: "Yes"} 
                            ];

    $scope.ChangeIndex = function()
  {
        $scope.RecievedSelect = $scope.RecievedOptions[0];
  }

但是，如果我删除track by item.id我可以手动更改索引，但无法再使用按钮（http://jsfiddle.net/Q5hd6/358/）更改索引。

基本上，我想两者都做，但我有点迷失在下一步的地方。

Answer 1

它应该是$scope.RecievedSelect = $scope.RecievedOptions[0].id;，因为select元素的模型包含所选选项的值。

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
  $scope.RecievedOptions  = [
                             {id : 0, name: "No"}, 
                             {id : 1, name: "Yes"}
                            ];                          
  $scope.ChangeIndex = function() {
      $scope.RecievedSelect = $scope.RecievedOptions[0].id;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="RecievedSelect" ng-options="item.id as item.name for item in RecievedOptions"></select>
<button ng-click="ChangeIndex()">Change index</button>
</div>

Answer 2

这适用于ng-options的情况，因为它不会创建AngularJs doc中所述的新范围，但我的其余部分对ng-model指令和任何创建新范围的指令都有效:(对于数组中每个项目的ng-repeat，它将创建一个新的子范围，你可以阅读这个机制Understand the concept of scopes），但它始终是一个很好的模式。

如果你没有通过一个对象，那么子范围将在这里创建自己的值ReceivedSelect这是一个JavaScript行为，这就是为什么你必须将它改为一个对象的属性的原因比如sct.ReceivedSelect。

<div ng-app="myApp" ng-controller="MyCtrl">

<select ng-model="sct.RecievedSelect" ng-options="item as item.name for item in RecievedOptions track by item.id"></select>
<button ng-click="ChangeIndex()">Change index</button>
</div>

JS：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
$scope.RecievedOptions  = [
                              {id : 0, name: "No"}, 
                              {id : 1, name: "Yes"} 
                            ];
    $scope.sct = {RecievedSelect : $scope.RecievedOptions[0]};                                
    $scope.ChangeIndex = function() {
     $scope.sct.RecievedSelect = $scope.RecievedOptions[0];
    }
});

看看这个JSFiddle：

http://jsfiddle.net/Q5hd6/367/

问题与下拉框重置为更改时清空选择

2 个答案: