AngularJS單選按鈕沒有在加載時被檢查

我有一個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。我還添加了一個按鈕來演示可以將selectedItem設置爲第三項，並單選按鈕將相應更新。

這是一個演示該問題的解決方案。

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

來源

2015-02-11 DanielC

你必須爲NG-value屬性的HTML模板錯字，應該是

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

來源

2015-02-11 17:29:12 thedoctor

好廢話，我無法相信我錯過了。謝謝！ – DanielC 2015-02-11 17:32:50

AngularJS單選按鈕沒有在加載時被檢查

回答

相關問題