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

Question

我遇到了最困难的时间来为 SELECT 元素进行双向绑定。我正在尝试以编程方式更改所选元素。我已经找到了几个 Whosebug 示例来绑定 SELECT 的更改事件，但我没有太多采用其他方式，您的应用程序代码会更改所选元素。

我发现有一些在 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>

控制器代码：

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

我最近遇到了类似的问题。看看我的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>

Answer 2

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

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

主要部分是选项的定义。在您的 ng-options 中，您设置了所有对象。如果这是您真正想要的，您必须像这样在 currentCommand 中做同样的事情：

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

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

Unable to use 2 way binding on SELECT element in Angular JS programmably

javascript

angularjs

angularjs-ng-options

angularjs-ng-model