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

Question

我很难让两种方式绑定(bind)适用于 SELECT 元素。我正在尝试以编程方式更改所选元素。我找到了几个用于绑定(bind) SELECT 的更改事件的 Stackoverflow 示例，但我并没有找到很多相反的方法，即应用程序代码更改所选元素。

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

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>

Controller 代码:

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 正在更改，但选项似乎没有被选中。

Fiddle here

Answer 1

有工作 fiddle 吗:http://jsfiddle.net/bzhkkw18/9/

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

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

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