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

时间:2016-02-24 07:53:58

标签: angularjs checkbox

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

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

2 个答案:

答案 0 :(得分:0)

我没有注意到将数据保存在这样的属性中的重点,除非出于特殊原因您需要这些属性。

最简单的方法是在您的范围内创建一个对象数组:

ScanOptions options = ScanOptions.scanOptions().match(pattern).count(1).build();

Cursor<Entry<Object, Object>> keys = redistemplate.opsForHash().scan("Customer", options);

然后你可以使用ng-repeat创建表并将复选框绑定到$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} ]; 属性:

.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()

答案 1 :(得分:0)

添加属性&#39;已选中&#39;到你的复选框模型

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