首页 \ 问答 \ AngularJS：根据表一中的已检查行隐藏空表(AngularJS: Hide Empty Table based on checked rows in Table One)

AngularJS：根据表一中的已检查行隐藏空表(AngularJS: Hide Empty Table based on checked rows in Table One)

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

 这是更新的jsfiddle示例。 
 

 这是我的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'}
                    ];  


    };


I have a table of data each with a checkbox. Any row that is checked moves into a second table for processing (processing not shown). I want the second table hidden unless it has rows but can't seem to figure out the ng-show. (Updated to show the need to hide the second table)
 

Here's the updated jsfiddle example.
 

Here's my html (I have the line that doesn't work commented out):
 

<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>

 

and here's the 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'}
                    ];  


    };


原文：https://stackoverflow.com/questions/23903036
更新时间：2022-05-11 15:05

最满意答案

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

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

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


Simply add a function isAtLeastOneDataChecked() in your controller, which returns true if at least one data is checked, and false otherwise, and use it in your template:
 

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

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

相关问答

更多