无法以编程方式在 Angular JS 中的 SELECT 元素上使用 2 路绑定

Question

我很难让两种方式绑定为 SELECT 元素工作。我正在尝试以编程方式更改选定的元素。我找到了几个 Stackoverflow 示例，用于绑定 SELECT 的更改事件，但我并没有很多人采用其他方式，您的应用程序代码会更改所选元素。

我发现有一些在 OPTION 元素上使用 ng-repeat 但我 a) 无法让它工作，并且 b) 似乎不是“Angular 方式” .

HTML 代码：

<div ng-controller="SIController">
<select id="current-command" ng-model="currentCommand"
ng-options="c as c.label for c in availableCommands track by c.id"></select>
<button ng-click="changeSelectedOption()">Select "open"</button>

控制器代码：

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

function SIController($scope) {

    $scope.availableCommands = [
        {id: 'edit',        label: 'Edit'},
        {id: 'open',        label: 'Open'},
        {id: 'close',       label: 'Close'}
    ];

    $scope.currentCommand = "close";
    $scope.changeSelectedOption = function() {
        $scope.currentCommand = 'open';
    };  
};

我可以验证单击按钮时 $scope.currentCommand 正在更改，但似乎没有选择 OPTION。

Fiddle here

Answer 1

有没有工作小提琴：http://jsfiddle.net/bzhkkw18/9/

为了解释我所做的事情，ng-click 和控制器中的函数名称不匹配。

主要部分是您的选项的定义。在您的ng-options 中设置所有对象。如果这是您真正想要的，您必须在您的currentCommand 中执行相同的操作，如下所示：

//Object 2 is close
$scope.currentCommand = $scope.availableCommands[2];

Answer 2

我最近遇到了类似的问题。看看我的answer。您应该修改定义 ng-options 的方式。

function MyCtrl($scope) {
    $scope.values = [
        {name : "Daily", id : 1},
        {name : "Weekly", id : 2},
        {name : "Monthly", id : 3},
        {name : "Yearly", id : 4}];
    $scope.selectedItem = $scope.values[0].id;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="selectedItem.id as selectedItem.name for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>