Невозможно использовать двухпозиционное связывание на элементе SELECT в программируемом угловом JS

Question

У меня труднее всего получить двустороннюю привязку для работы элементов SELECT. Я пытаюсь изменить выбранный элемент программируемо. Я нашел несколько примеров Stackoverflow для привязки события изменения для SELECT, но меня не так много происходит по-другому, где ваш код приложения изменяет выбранный элемент.

Было несколько, что я обнаружил, что ng-repeat использует элемент OPTION, но я: a) не смог заставить его работать, и b), похоже, не является «угловым способом» ».

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

Есть рабочая скрипку: http://jsfiddle.net/bzhkkw18/9/

Чтобы объяснить, что я сделал, есть имя функции, которая не соответствует по ng-click и в контроллер.

И основной частью было определение вашего варианта. В вашем ng-options вы установите все объекты. Если это то, что вы действительно хотите, вы должны сделать то же самое в вашем currentCommand, как это:

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

Answer 2

Недавно у меня была аналогичная проблема. Взгляните на мой answer. Вы должны изменить способ определения ng-опций.

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>