AngularJS: Hide Empty Table based on checked rows in Table One

Question

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'}
                    ];  


    };

You should be applying ng-show to the <tr> element if you want to hide the row from the first table as it is checked. jsfiddle.net/6chnJ — miqh
– miqh, Commented May 28, 2014 at 5:37
Actually I need the second table hidden (in this case it just says "Table Two" but in reality it has a header row and a button that I want hidden unless there is a selection. — jgravois
– jgravois, Commented May 28, 2014 at 10:11
I updated the question and the jsfiddle to show that an empty table shows which I need to hide. Thanks for the answer and sorry for the confusion. — jgravois
– jgravois, Commented May 28, 2014 at 10:20

JB Nizet · Accepted Answer · 2014-05-28 10:48:15Z

1

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

answered May 28, 2014 at 10:48

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Hide Empty Table based on checked rows in Table One

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related