ng-repeat track by id working，如何在ng-repeat中过滤

Question

这是我的 js 代码，其中我是 json 数组的列表，保存在范围模型中并在 html 中用于绑定..

var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope) {
  $scope.response = [{
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "1",
    "svTargetCrowd": null,
    "svCompanyName": "Software Solutions",
    "svService": null,
    "svDomain": null,
    "svOwnName": "Name",
    "svContactNo": "9882563143",
    "svEmailID": null,
    "svStatus": "Prospective",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Brand",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "2",
    "svTargetCrowd": null,
    "svCompanyName": "Software Solutions",
    "svService": null,
    "svDomain": null,
    "svOwnName": "Nameman",
    "svContactNo": "9824563143",
    "svEmailID": null,
    "svStatus": "Prospective",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Service",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "3",
    "svTargetCrowd": null,
    "svCompanyName": "XYZ pvt ltd",
    "svService": null,
    "svDomain": null,
    "svOwnName": "XYZ",
    "svContactNo": "8877465544",
    "svEmailID": null,
    "svStatus": "Followups",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Brand",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "4",
    "svTargetCrowd": null,
    "svCompanyName": "ABC pvt ltd",
    "svService": null,
    "svDomain": null,
    "svOwnName": "ABC",
    "svContactNo": "9876643210",
    "svEmailID": null,
    "svStatus": "Call Backs",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Brand",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "5",
    "svTargetCrowd": null,
    "svCompanyName": "companyName",
    "svService": null,
    "svDomain": null,
    "svOwnName": "contactPerson",
    "svContactNo": "9698098720",
    "svEmailID": null,
    "svStatus": "Not Interested",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "rem",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "16",
    "svTargetCrowd": null,
    "svCompanyName": "Iejsbdksns",
    "svService": null,
    "svDomain": null,
    "svOwnName": "Ksndhdjd",
    "svContactNo": "Ukebdjdn",
    "svEmailID": null,
    "svStatus": "Closed",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Iwjdbsnkz",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "15",
    "svTargetCrowd": null,
    "svCompanyName": "companys",
    "svService": null,
    "svDomain": null,
    "svOwnName": "money",
    "svContactNo": "9788478886",
    "svEmailID": null,
    "svStatus": "Closed",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "fho",
    "status": null
  }]
});

  /* Here, In Html i have used ng-repeat and the output is working when i put  ng-repeat: chosen in response track by chosen.svID....*/
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Service</title>


  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

  <!-- ionic/angularjs js -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>

<body ng-app="starter">
  <div ng-controller="customersCtrl" ng-cloak>
    <h1>Values</h1>
    <ul class="chosen" dnd-list="model">
      <li ng-repeat="chosen in response track by chosen.svID">
        {{chosen.svCompanyName}}<br>
        {{chosen.svOwnName}}<br>
        {{chosen.svContactNo}}<br>
        {{chosen.svStatus}}<br>
        <h2>---------------------</h2>
      </li>
    </ul>
    <!-- <div>
     <span>{{response}}</span>
   </div>
   <span>{{error}}</span>-->
  </div>
</body>

</html>

我的问题是：我需要通过 chosen.svID 进行跟踪，并且我还需要使用名为 svStatus 的数组中的项目过滤此 json。（即）我需要这样的输出

 Iejsbdksns
 Ksndhdjd
 Ukebdjdn
 Closed
 ---------------------

 companys
 money
 9788478886
 Closed
 ---------------------

我需要这样的输出，我只需要 svstatus 关闭的项目。请有人建议我一些编码来实现这个输出拜托..提前致谢..

Answer 1

ng-if 和 ng-repeat 做到了！

var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope) {
  $scope.response = [{
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "1",
    "svTargetCrowd": null,
    "svCompanyName": "Software Solutions",
    "svService": null,
    "svDomain": null,
    "svOwnName": "Name",
    "svContactNo": "9882563143",
    "svEmailID": null,
    "svStatus": "Prospective",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Brand",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "2",
    "svTargetCrowd": null,
    "svCompanyName": "Software Solutions",
    "svService": null,
    "svDomain": null,
    "svOwnName": "Nameman",
    "svContactNo": "9824563143",
    "svEmailID": null,
    "svStatus": "Prospective",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Service",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "3",
    "svTargetCrowd": null,
    "svCompanyName": "XYZ pvt ltd",
    "svService": null,
    "svDomain": null,
    "svOwnName": "XYZ",
    "svContactNo": "8877465544",
    "svEmailID": null,
    "svStatus": "Followups",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Brand",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "4",
    "svTargetCrowd": null,
    "svCompanyName": "ABC pvt ltd",
    "svService": null,
    "svDomain": null,
    "svOwnName": "ABC",
    "svContactNo": "9876643210",
    "svEmailID": null,
    "svStatus": "Call Backs",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Brand",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "5",
    "svTargetCrowd": null,
    "svCompanyName": "companyName",
    "svService": null,
    "svDomain": null,
    "svOwnName": "contactPerson",
    "svContactNo": "9698098720",
    "svEmailID": null,
    "svStatus": "Not Interested",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "rem",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "16",
    "svTargetCrowd": null,
    "svCompanyName": "Iejsbdksns",
    "svService": null,
    "svDomain": null,
    "svOwnName": "Ksndhdjd",
    "svContactNo": "Ukebdjdn",
    "svEmailID": null,
    "svStatus": "Closed",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "Iwjdbsnkz",
    "status": null
  }, {
    "__type": "CorsTest.SalesVisit",
    "empId": null,
    "svID": "15",
    "svTargetCrowd": null,
    "svCompanyName": "companys",
    "svService": null,
    "svDomain": null,
    "svOwnName": "money",
    "svContactNo": "9788478886",
    "svEmailID": null,
    "svStatus": "Closed",
    "svnvDate": null,
    "svComments": null,
    "svVisitName": "fho",
    "status": null
  }]
});

/* Here, In Html i have used ng-repeat and the output is working when i put  ng-repeat: chosen in response track by chosen.svID....*/
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Service</title>


  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

  <!-- ionic/angularjs js -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>

<body ng-app="starter">
  <div ng-controller="customersCtrl" ng-cloak>
    <h1>Values</h1>
    <ul class="chosen" dnd-list="model">
      <li ng-repeat="chosen in response track by chosen.svID" ng-if="chosen.svStatus=='Closed'">
        {{chosen.svCompanyName}}<br>
        {{chosen.svOwnName}}<br>
        {{chosen.svContactNo}}<br>
        {{chosen.svStatus}}<br>
        <h2>---------------------</h2>
      </li>
    </ul>
    <!-- <div>
     <span>{{response}}</span>
   </div>
   <span>{{error}}</span>-->
  </div>
</body>

</html>

Answer 2

使用 angular 过滤器 ng-repeat

<li ng-repeat="chosen in response | filter : {svStatus : 'closed'} track by chosen.svID">

ng-repeat track by id working，如何在ng-repeat中过滤

ng-repeat track by id working,how to filter in ng-repeat

javascript

json

angularjs

ng-repeat

angularjs-ng-repeat