angularjs + 获取多个复选框值和属性值答案

【问题标题】：angularjs + get multiple checkbox value and attribute valuesangularjs + 获取多个复选框值和属性值
【发布时间】：2016-02-24 16:16:54
【问题描述】：

我正在尝试获取多个复选框值和属性值。

每个复选框都有多个属性值（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() {
     ///
    };
});

【问题讨论】：

标签： angularjs checkbox

【解决方案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-repeat 创建表格并将复选框绑定到.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.
}

【讨论】：

【解决方案2】：

将属性 'checked' 添加到您的复选框模型中

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

在您的 html 中使用 ng-model 绑定到您的选中属性

<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 });
});

【讨论】：