使用 ng-if 条件嵌套 ng-repeat 以跳过嵌套数组答案

【问题标题】：Nested ng-repeat with ng-if condition for skip the nested array使用 ng-if 条件嵌套 ng-repeat 以跳过嵌套数组
【发布时间】：2017-01-16 13:53:50
【问题描述】：

我有一个 JSON 数组...

{
  "Name" : "ABC",
  "rating": [
    {
      "id": null,
      "Percentage": 40
    },
    {
      "id": 0,
      "Percentage": 40
    },
    {
      "id": 1,
      "Percentage": 20
    }
  ],
  "email" : "abc@abc.com"
}

我只想获得 id 0 和 1 不为空的百分比（跳过）... 我用ng-repeat...在html中显示这个数组，我只想显示id等于0和1的百分比而不是null（跳过）。

【问题讨论】：

请向我们展示您尝试过的代码。
考虑添加过滤器。 ng-repeat 的角度过滤器。

标签： javascript jquery angularjs

【解决方案1】：

这应该是数组结构的 ng-repeat：

<div
  ng-repeat="item in items"
  ng-show="item.id != null && item.id == 0 || item.id == 1">
</div>

这只是数组，不是 json 对象，在此之前您也必须循环遍历它。

【讨论】：

这只会隐藏元素，但它们仍在 HTML 中。在这种情况下，我更喜欢ng-if。
是的，ng-if 效率更高。

【解决方案2】：

如果你只想在HTML中有那些0或1在HTML中，你可以使用以下代码sn -p：

HTML：

<div ng-repeat="rating in object.rating | filter: skipNull">

角度控制器：

$scope.skipNull = function(item) {
    return item.id === 0 || item.id === 1;
}

这是JSFiddle。

如果你使用这样的函数，你可能会更好，它只检查null 和undefined：

$scope.skipNull = function(item) {
    return (typeof item.id !== "undefined" && item.id !== null);
}

【讨论】：

你不需要过滤，只用ng-if指令更容易。
我觉得最好return rating != undefined
@Rajesh 这可能是真的。我已经添加了。

【解决方案3】：

您可以使用自定义过滤器。就像在this 答案中一样。

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.data = {
    "Name" : "ABC",
    "rating": [
      {
        "id": null,
        "Percentage": 40
      },
      {
        "id": 0,
        "Percentage": 40
      },
      {
        "id": 1,
        "Percentage": 20
      }
    ],
    "email" : "abc@abc.com"
  };
  
  $scope.noNull = function(item) {
    return item.id != null;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in data.rating | filter:noNull" ng-bind="item.Percentage"></li>
    </ul>
</div>

【讨论】：

【解决方案4】：

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

app.controller('MainCtrl', function($scope, $http) {
    
         
          $scope.results =  [{
   "Name": "ABC",
   "rating": [{
     "id": null,
     "Percentage": 40
   }, {
     "id": 0,
     "Percentage": 40
   }, {
     "id": 1,
     "Percentage": 20
   }],
   "email": "abc@abc.com"
 }] ;
          $scope.resultstobeDisplayed = [];
          angular.forEach($scope.results[0].rating, function(val) {
                  if (val.id != null) {
                    $scope.resultstobeDisplayed.push(val);
                  }
                 
              });
         
      });

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.6.1/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="vale in resultstobeDisplayed">
   <h1>{{vale}}</h1>
  </div>


</body>

</html>

【讨论】：

【解决方案5】：

你可以使用 ng-if

<div ng-repeat="rating in object.rating" ng-if="rating.id != null">

【讨论】：

【解决方案6】：

您可以像这样在控制器中创建过滤器功能：

控制器：

$scope.hideNullRatings = function(item) {
   return item.id ===0 || item.id === 1;
}

HTML：

ng-repeat='item in items | filter: hideNullRatings'

【讨论】：

【解决方案7】：

你必须使用ng-if 指令。你所要做的就是apply它：

ng-if="item.id!=null"

function TodoCtrl($scope) {
  $scope.data={ "Name" : "ABC", "rating": [ { "id": null, "Percentage": 40 }, { "id": 0, "Percentage": 40 }, { "id": 1, "Percentage": 20 } ], "email" : "abc@abc.com" };
}

td{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
     <table>
       <tr>
         <th>Id</th>
         <th>Percentage</th>
       </tr>
       <tr ng-repeat="item in data.rating" ng-if="item.id!=null">
         <td>{{item.id}}</td>
         <td>{{item.Percentage}}</td>
       </tr>
     </table>
  </div>
</div>

【讨论】：