angularjs +獲取多個複選框的值和屬性值

Question

我想獲取多個複選框的值和屬性值。

每個複選框有多個屬性值（data-id，data-ot，data-si）。

如何獲取帶有3個屬性值的選中複選框。

<table> 
    <thead class="search"> 
     <tr> 
      <th> 
      <input type="checkbox" class="selectall " ng-model="selectall" ng-click="select(data)"> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr > 
      <td> 
      <input data-id="287" data-ot="31" data-si="541" type="checkbox" - ng-model="rowselect"> 
      </td> 
     </tr> 
     <tr > 
      <td> 
      <input data-id="295" data-ot="331" data-si="31" type="checkbox" ng-model="rowselect"> 
      </td> 

     </tr> 
     <tr > 
      <td> 
      <input data-id="297" data-ot="321" data-si="31" type="checkbox" ng-model="rowselect"> 
      </td> 
     </tr> 
     <tr > 
      <td> 
      <input data-id="296" data-ot="451" data-si="671" type="checkbox" ng-model="rowselect"> 
      </td> 
     </tr> 
     <tr > 
      <td> 
      <input data-id="293" data-ot="91" data-si="651" type="checkbox" ng-model="rowselect"> 
      </td> 
     </tr> 
     <tr > 
      <td> 
      <input data-id="294" data-ot="13" data-si="14" type="checkbox" ng-model="rowselect"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

<input type="button" name="Submit" value="Submit" ng-click="ShowSelected()" /> 

預期輸出：

例如2複選框選擇中選擇的方式：

[{"id":"xx","ot":"xx","si"},{"id":"xx","ot":"xx","si"},] 

代碼：

app.controller('MyCtrl', function($scope) { 
    $scope.ShowSelected = function() { 
    /// 
    }; 
}); 

Answer 1

我不明白這一點在保持數據的內部這樣的屬性，除非這是你特別需要的某些特定原因。

做到這一點，最簡單的方法是使你的範圍像這樣的對象數組：

$scope.data = [ 
    {id: 123, ot: 234, si: 567, checked: false}, 
    {id: 321, ot: 243, si: 789, checked: false}, 
    {id: 345, ot: 678, si: 567, checked: false} 
]; 

這時你可以用NG-重複創建表並綁定複選框可以.checked屬性：

<table> 
    <thead> 
    <!-- your table header --> 
    </thead> 
    <tbody> 
    <tr ng-repeat="element in data"> 
     <td> 
     <input type="checkbox" ng-model="element.checked"> 
     </td> 
    </tr> 
    </tbody> 
</table> 

，然後寫入showSelected()功能：

$scope.showSelected = function(){ 
    var tempArray = []; 
    for(var i=0; i<data.length; i++){ 
    if(data[i].checked) tempArray.push(data[i]); 
    } 
    return tempArray; //or maybe console.log(tempArray) or encode to JSON etc. 
} 

Answer 2

添加屬性「檢查」到你的複選框模型

$scope.checkboxList = {[ 
    { 
     "id": "xx", 
     "ot": "xx", 
     "checked": false 
    }, 
    { 
     "id": "xx", 
     "ot": "xx", 
     "checked": false 
    } 
]} 

使用ng-model在HTML綁定到你選中屬性

<tr ng-repeat="checkbox in checkboxList "> 
    <td><input type="checkbox" ng-model="checkbox.selected"></td> 
    <td>{{checkbox.ot}}</td> 
</tr> 

而在你的控制器，你可以使用$filter來篩選複選框

app.controller('MyCtrl', function($scope, $filter) { 
    $scope.ShowSelected = $filter('filter')($scope.checkboxList , { $: true }); 
});