首页 \ 问答 \ 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;
    });
};

相关问答

更多