如何在ng-repeat中動態更新ng-model？

Question

我在我的角度頁面中遇到了動態ng-model值的一些問題。這是我的示例JSON。

mytabs = [ 
    { 
     name : "tab1", 
     values : [ 
      {value:"value1"}, 
      {value:"value2"}, 
      {value:"value3"}, 
      {value:"value4"} 
     ] 
    }, 
    { 
     name : "tab2", 
     values : [ 
      {value:"value1"}, 
      {value:"value2"}, 
      {value:"value3"}, 
      {value:"value4"} 
     ] 
    } 
] 

我想從這個josn做的是，創造了我的網頁這樣，它將包含tab1和tab2作爲頁面的標題和各自的value爲checkbox視圖。用戶將有選擇性選擇他的選項。提交時，我想獲得他選擇的選項。我想知道類似value1,value3 (frome tab1),value1,value2(from tab2)被選中，在我的控制器。我怎樣才能做到這一點？
這是我的示例方法。

<div ng-repeat="tab in mytabs"> 
    <h1>{{tab.name}}</h1> 
    <div ng-repeat="val in tab.values"> 
     <input type="checkbox" ng-model="val.value"/> 
    </div> 
</div> 
<input type="button" value="submit" ng-click="checkValues(val)" 

請幫助我，
謝謝

Answer 1

你應該修改你的代碼一點點，你應該在對象和綁定複選框，該模型添加checked屬性。

請可以使用下面的想法或代碼，以獲得想要的東西更緊密地

<div ng-repeat="tab in mytabs"> 
    <h1>{{tab.name}}</h1> 
    <div ng-repeat="val in tab.values"> 
     <input type="checkbox" ng-model="val.checked"/> 
    </div> 
</div> 
<input type="button" ng-click="checkValues()" value="checkitems" /> 

    <script> 
     var app = angular.module('plunker', []); 

     app.controller('MainCtrl', function ($scope,$filter) { 
      $scope.mytabs = [ 
       { 
        name: "tab1", 
        values: [ 
         { value: "value1",checked:false }, 
         { value: "value2", checked: false }, 
         { value: "value3", checked: false }, 
         { value: "value4", checked: false } 
        ] 
       }, 
       { 
        name: "tab2", 
        values: [ 
         { value: "value1", checked: false }, 
         { value: "value2", checked: false }, 
         { value: "value3", checked: false }, 
         { value: "value4", checked: false } 
        ] 
       } 
      ]; 

      $scope.checkValues = function() { 
       angular.forEach($scope.mytabs, function (value, index) { 
        var selectedItems = $filter('filter')(value.values, { checked: true }); 
        angular.forEach(selectedItems, function (value, index) { 
         alert(value.value); 
        }); 

       }); 
      }; 
     });