角js。检查表格中是否至少有一个复选框被选中

Question

我有以下 html：

<tbody ng-repeat="notification in notifications">
    <tr>
        <td rowspan="{{notification.specs.length+1}}">{{notification.notification_id}}</td>
    </tr>
    <tr ng-repeat="position in notification.specs">
        <td>{{position.lot}}</td>
        <td>{{position.id}}</td>
        <td>{{position.kind}}</td>
        <td>{{position.name}}</td>
        <td>{{position.release_form}}</td>
        <td>{{position.mnn}}</td>
        <td>{{position.tn}}</td>
        <td>{{position.metric}}</td>
        <td>{{position.price}}</td>
        <td>{{position.count}}</td>
        <td>{{position.full_character}}</td>
        <td>{{position.package_count}}</td>
        <td>{{position.who_checked}}</td>
        <td><input type="checkbox" ng-init="position.is_checked = false" ng-model="position.is_checked"></td>
        <td style="text-align:center" ><i class="icon-folder-open"></i></td>
    </tr>
</tbody>

我需要检查表格中是否至少有一个复选框被选中。如果它被选中，我必须显示一个特殊的块。如果没有选中任何复选框，我必须隐藏该块。

更新

当我从服务器获取数据时，模型中没有 is_checked 这样的字段。 有什么方法可以手动将字段添加到模型中？

Answer 1

公开一个 isChecked 函数，然后在您的视图中绑定到它。

控制器：

 $scope.isChecked = function(notifications) {
        for (var i = 0; i < notifications.length; ++i) {
        {
            var specs = notifications[i].specs;
            for (var j = 0; j < specs.length; ++j) {
                if (specs[j].is_checked)
                    return true;
            }
        }
        return false;
 };

HTML：

<div ng-show="isChecked()"> Special </div>

Answer 2

这应该可行：

MyApp.controller('MyCtrl', ['$scope', 'filterFilter',
    function ($scope, filterFilter) {
        $scope.isChecked = function(positions) {
            var checked = filterFilter(positions, {is_checked: true});
            return !!checked.length;
        };
    }
]);

那么您可以在模板中使用isChecked 函数。

Answer 3

未经测试，但应该可以工作

<tbody ng-repeat="notification in notifications">
    <tr>
        <td rowspan="{{notification.specs.length+1}}">{{notification.notification_id}}</td>
    </tr>
    <tr ng-repeat="position in notification.specs">
        {{provisorCtrl.specs = notification.specs}}
        <td>{{position.lot}}</td>
        <td>{{position.id}}</td>
        <td>{{position.kind}}</td>
        <td>{{position.name}}</td>
        <td>{{position.release_form}}</td>
        <td>{{position.mnn}}</td>
        <td>{{position.tn}}</td>
        <td>{{position.metric}}</td>
        <td>{{position.price}}</td>
        <td>{{position.count}}</td>
        <td>{{position.full_character}}</td>
        <td>{{position.package_count}}</td>
        <td>{{position.who_checked}}</td>
        <td><input type="checkbox" ng-init="position.is_checked = false" ng-model="position.is_checked"></td>
        <td style="text-align:center" ><i class="icon-folder-open"></i></td>
    </tr>
</tbody>
<!--added-->
<div id="specialBlock" ng-if="notifications | filter:{'is_checked':true}:true">show if any checkbox</div>

其他，也许更好的方法是在复选框上添加 ng-change

<td><input type="checkbox" ng-change="boxIsSelected = position.is_checked" ng-model="position.is_checked"></td>

那么

<!--added-->
<div id="specialBlock" ng-if="boxIsSelected">show if any checkbox</div>