Question

我有一个JSON数组......

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

我想只得到id 0和1的百分比而不是null（跳过）... 我在html中使用ng-repeat ...显示此数组，并且我只想显示id等于0且1不是null（跳过）的百分比。

Answer 1

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

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

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

Answer 2

如果您只想在HTML中使用HTML 0或1，请使用以下代码段：

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

Answer 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>

Answer 4

您必须使用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>

Answer 5

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 6

您可以在控制器中创建过滤功能，如下所示：

控制器：

english

HTML：

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

Answer 7

您可以使用ng-if

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

带有ng-if条件的嵌套ng-repeat用于跳过嵌套数组

7 个答案: