通过id工作的ng-repeat轨道，如何过滤ng-repeat

时间：2016-01-27 11:40:50

标签： javascript angularjs json angularjs-ng-repeat ng-repeat

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

＆＃13;
＆＃13; 
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
  }]
});
＆＃13; 
  /* 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>
＆＃13;
＆＃13;
＆＃13;       我的问题是：我需要通过selected.svID跟踪，我还需要使用名为svStatus的数组中的项来过滤这个json。（即）我需要像这样输出

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

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

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

2 个答案:

答案 0 :(得分：2)

使用角度过滤器和ng-repeat 

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

答案 1 :(得分：0)

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>

相关问题
最新问题