Question

单击按钮时，我试图隐藏表格中的某些行。我想隐藏考试数量等于零的行。

HTML code：

    <div ng-app="myApp">
    <div ng-controller="myController">
        <button ng-click="hide();"> HIDE ROWS</button>
        <br/>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Exams</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-class="{'showNot' : item.examsNum === 0}" ng-repeat="item in data.records">
                    <td>{{item.name}}</td>
                    <td>{{item.examsNum}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

AngularJS：

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

    myApp.controller('myController', ['$scope', function ($scope) {
    $scope.data = {
        records: [{
            name: 'Mel',
            examsNum: 2
        }, {
            name: 'Sarah',
            examsNum: 2
        }, {
            name: 'Jane',
            examsNum: 0
        }]
    }; 

    $scope.hide = function () { 
        angular.element('.showNot').css("display", "none");
    };
}]);

这是jsfiddle：link

我对AngularJS很陌生，我无法看清我做错了什么。

谢谢！

Answer 1

您可以为表<table id="table">提供ID，然后将选择器更改为

var elem = document.querySelector('#table');
angular.element(elem.querySelector('.showNot')).css('display', 'none')

我们无法在jQlite中轻松使用类选择器 - Limited to lookups by tag name但这应该对您有用

JSFiddle Link

Answer 2

您需要使用ng-show或ng-hide指令而不是display none

HTML

  <div ng-app="myApp">
    <div ng-controller="myController">
        <button ng-click="hide()"> HIDE ROWS</button>
        <br/>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Exams</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-show="Display" ng-repeat="item in data.records">
                    <td>{{item.name}}</td>
                    <td>{{item.examsNum}}</td>
                </tr>
            </tbody>
        </table>
    </div>
 </div>

脚本

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

    myApp.controller('myController', ['$scope', function ($scope) {
    $scope.data = {
        records: [{
            name: 'Mel',
            examsNum: 2
        }, {
            name: 'Sarah',
            examsNum: 2
        }, {
            name: 'Jane',
            examsNum: 0
        }]
    }; 

    $scope.Display = true;

    $scope.hide = function () { 
       $scope.Display = !$scope.Display ;
    };
}]);

Answer 3

也许使用过滤器更正确。

https://docs.angularjs.org/api/ng/service/$filter

过滤器可用于根据某些标准隐藏列表中的项目 - 听起来就像你正在做的那样

Answer 4

尝试使用show / hide标志，并在ng-show中使用它以及零检查： Here's a fiddle

        <div ng-app="myApp">
<div ng-controller="myController">
    <button ng-click="hide();"> HIDE ROWS</button>
    <br/>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Exams</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-hide="(item.examsNum == 0) && hideZero" ng-repeat="item in data.records">
                <td>{{item.name}}</td>
                <td>{{item.examsNum}}</td>
            </tr>
        </tbody>
    </table>
</div>

和

    myApp.controller('myController', ['$scope', function ($scope) {
    $scope.data = {
        records: [{
            name: 'Mel',
            examsNum: 2
        }, {
            name: 'Sarah',
            examsNum: 2
        }, {
            name: 'Jane',
            examsNum: 0
        }]
    }; 

    $scope.hide = function () { 
        $scope.hideZero = !$scope.hideZero;
    };
}]);

Answer 5

好。所以你在这里弄错了。＆＃39;项目＆＃39;仅在ng-repeat范围内可用。您无法在与ng-repeat相同的级别访问它。 Here是您代码的工作版本。请使用ng-hide / ng-show进行此类操作。它更有效率。

<div ng-app="myApp">
      <div ng-controller="myController">
        <button ng-click="hide();"> HIDE ROWS</button>
        <br />

        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Exams</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in data.records">

              <td ng-hide='item.examsNum === 0'>{{item.name}}</td>
              <td ng-hide='item.examsNum === 0'>{{item.examsNum}}</td>

            </tr>
          </tbody>
        </table>
      </div>
    </div>

AngularJS单击按钮时，在给定条件下隐藏表中的行

5 个答案:

JSFiddle Link