角重複單選按鈕組

Question

我有「建議」，像推薦的數組：

{Id: 1, Label: "option 1"}, 
{Id: 2, Label: "option 2"} 

和「項目」，項目組成的數組，如：

{Id: 1, Name: "Name 1", Recommend: recommendations[0]}, 
{Id: 2, Name: "Name 2", Recommend: recommendations[1]} 

現在我喜歡爲每個項目顯示項目列表，顯示項目名稱和單選按鈕組，以讓用戶選擇可能的「推薦」選項之一。

我的HTML看起來像：

<div ng-repeat="i in viewModel.items"> 
    <div> 
    {{i.Name}} 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-md-3">Recommend this?</label> 
    <div class="col-md-9"> 
     <div class="radio" ng-repeat="r in viewModel.recommendations"> 
      <label> 
       <input type="radio" ng-model="i.Recommend" ng-value="r"/> 
       {{r.Label}} 
      </label> 
     </div> 
    </div> 
    {{i.Name}}, {{i.Recommend.Label}} 
    </div> 
</div> 
{{viewModel.items | json}} 

當我點擊的每一個項目的選項之一，我看到相應Recommend.Label被適當地改變，因此似乎被綁定到模型確定。

我的問題是，在初始頁面加載時，每個項目的單選按鈕組都沒有顯示當前選項，即使'項目'似乎有一個可能的推薦對象。 （所有的單選按鈕沒有被選中）。 我錯過了什麼？

Answer 1

您應該在開始時將項目的「Recommend」值設置爲綁定到$ scope.recommendations。

angular.module('test', []).controller('testCtrl', function($scope) { 
$scope.viewModel = {}; 
$scope.viewModel.recommendations = [{Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"}]; 
$scope.viewModel.items = [{Id: 1, Name: "Name 1", Recommend: $scope.viewModel.recommendations[0]}, {Id: 2, Name: "Name 2", Recommend: $scope.viewModel.recommendations[1]}]; }); 

的jsfiddle：http://jsfiddle.net/rkgetptj/