Question

是否可以使用ng-repeat条件隐藏ng-if行？

我们正尝试使用ng-repeat条件限制显示ng-if行。在这里，我检查值五和三如果它不存在那么我需要隐藏该行。

＆＃13;

 angular
   .module('myApp', [])
   .controller('TodoCtrl', function($scope) {
     $scope.comments = [{
       type: 'one'
     }, {
       type: 'two'
     }, {
       type: 'three'
     }, {
       type: 'four'
     }]
   });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="TodoCtrl">
    <table>
      <tr ng-repeat="data in comments">
        <td ng-if="data.type == 'five' ">five</td>
        <td ng-if="data.type == 'three' ">Three</td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

输出

five Three five Three five Three five Three

预期输出：

Three Three Three Three

Answer 1

是的，您可以在同一元素上使用多个指令，从而实现所需的输出。看一下这个例子，在同一个元素上，我放置了ngRepeat，ngIf，ngClick和ngBind。

angular
  .module('myApp', [])
  .controller('MyCtrl', function() {
    this.myList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    this.showNum = function(num) {
      console.log('You clicked on', num);
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<div ng-app="myApp">
  <div ng-controller="MyCtrl as vm">
    <ul>
      <li ng-repeat="listItem in vm.myList" 
          ng-if="listItem % 2 === 0" 
          ng-click="vm.showNum(listItem);" 
          ng-bind="listItem"></li>
    </ul>
  </div>
</div>

Answer 2

始终首选使用名称初始化角度模块，而不是将其设为空白。

ngIf指令删除或重新创建DOM树的一部分基于{表达式}。如果分配给ngIf的表达式求值如果为false，则从DOM中删除该元素，否则为a 将元素的克隆重新插入DOM。有关详细信息，请参阅下面的摘要...更多信息ngif

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TodoCtrl">
    <div >
        <table>
            <tr ng-repeat="data in comments">
                <td ng-if="data.type == 'five'"> five </td>
                <td ng-if="data.type == 'three'"> Three </td>
            </tr>
        </table>
    </div>
</div>

＆＃13;

<div  class="col-sm-8">
    <div class="col-sm-6 btn-submit">

    </div>
</div>

＆＃13;

Answer 3

我认为你没有在你的评论数组中添加五个

$scope.comments = [ {type:'one'},{type:'two'},{type:'three'},{type:'four'},{type:'five'} ]

ng-if是条件不在Ng-repeat中

3 个答案: