2015-02-11 3 views
0

У меня есть контроллер angularJS, который создает область со списком элементов и имеет свойство для выбранного элемента. Во время инициализации я создаю список и устанавливаю свойство selectedItem во второй элемент в списке.Радиоуправления от AngularJS не отмечены при загрузке

app.controller('MainCtrl', function($scope) { 
    $scope.items = [ 
    {id: 1, name: "Item 1"}, 
    {id: 2, name: "Item 2"}, 
    {id: 3, name: "Item 3"} 
    ]; 

    $scope.selectedItem = $scope.items[1]; 
}); 

Вид представляет собой список с пометкой для каждого элемента.

<body ng-controller="MainCtrl"> 
    <div ng-repeat="item in items"> 
     <label> 
     <input type="radio" ng-model="$parent.selectedItem" ng-value="{{item}}" ng-checked="$parent.selectedItem==item"> 
     {{item.name}} 
     </label> 
    </div> 
    Selected Value: {{selectedItem}} 
    <div> 
     <button ng-click="selectedItem=items[2]">Select 3</button> 
    </div> 
    </body> 

Все работает правильно, за исключением того, что второй переключатель не отображается, как отмечено при загрузке представления. Выбор переключателя изменяет выбранный элемент как ожидалось. Я также добавил кнопку, чтобы продемонстрировать, что я могу установить selectedItem на третий элемент, и соответствующие переключатели будут обновляться соответствующим образом.

Вот плункер, который демонстрирует проблему.

http://plnkr.co/edit/1TbpHgFm5kpa9k3OJtbI?p=preview

ответ

2

У вас есть опечатка в шаблоне HTML для атрибута нг-значение, оно должно быть

 <label> 
     <input type="radio" ng-model="$parent.selectedItem" ng-value="item"> 
     {{item.name}} 
     </label> 
+0

Ну Дух, я не могу поверить, что я пропустил это. Благодаря! – DanielC

Смежные вопросы