Question

我有一个数据表，每个数据表都有一个复选框。检查的任何行都移动到第二个表中进行处理（处理未显示）。我想隐藏第二个表，除非它有行，但似乎无法弄清楚ng-show。（更新以显示需要隐藏第二个表格）

这是我的HTML（我的行没有注释掉）：

<span>Table One</span>
<div ng-controller="checkBoxCtrl">
    <table width="400" border="1">
        <tr>
            <th>&#10004;</th>
            <th>Key</th>
            <th>Value</th>
        </tr>
        <tr ng-repeat="data in tableOne" id="item{{data.key}}">
            <td width="20px">
                <input type="checkbox" ng-model="data.checked">
            </td>
            <td>{{data.key}}</td>
            <td>{{data.value}}</td>
        </tr>
    </table>
    <br>
    <!--<div ng-show="tableOne.key.checked == true"> -->
    <div>
    <span>Table Two</span>

    <table width="400" border="1">
        <tr>
            <th>Key</th>
            <th>Value</th>
        </tr>
        <tr ng-repeat="data in tableOne | filter: {checked:true}">
            <td>{{data.key}}</td>
            <td>{{data.value}}</td>
        </tr>
        <tr>
            <td colspan="2">
                <button>New Group</button>
            </td>
        </tr>
    </table>
 </div>

这里是javascript：

var app = angular.module('myApp', []);

function checkBoxCtrl($scope){

    $scope.tableOne=[
                    {key: '1',  value: 'a'},
                    {key: '2',  value: 'b'},
                    {key: '3',  value: 'c'},
                    {key: '4',  value: 'd'}
                    ];  


    };

Answer 1

只需在控制器中添加一个函数isAtLeastOneDataChecked()，如果至少检查了一个数据，则返回true，否则返回false，并在模板中使用它：

<table width="400" border="1" ng-show="isAtLeastOneDataChecked()">

$scope.isAtLeastOneDataChecked = function() {
    return $scope.tableOne.some(function(data) {
        return data.checked;
    });
};

AngularJS：根据表一中的已检查行隐藏空表

1 个答案: