AngularJS 1:使用父对象的属性过滤子ng-repeat循环中的对象

时间:2016-11-21 15:22:20

标签: angularjs angularjs-directive

我无法获得表达式作为过滤器参数。

我有两个对象数组

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.clients = [
    {'client_id' : '1', 'client_name' : 'Anne'}, 
    {'client_id' : '2', 'client_name' : 'Tim'},
    {'client_id' : '3', 'client_name' : 'John'}
    ];

  $scope.courses = [
    {'ordered_by' : '1', 'course_name' : 'Marketing'}, 
    {'ordered_by' : '1', 'course_name' : 'Project Management'}, 
    {'ordered_by' : '1', 'course_name' : 'Analytics'}, 
    {'ordered_by' : '2', 'course_name' : 'Big Data'},
    {'ordered_by' : '2', 'course_name' : 'Data Visualization'},
    {'ordered_by' : '3', 'course_name' : 'PHP'}
    ];
});

使用ng-repeat指令循环使用它们可以正常工作,但我希望能够使用当前由父循环处理的对象的属性值来过滤嵌套循环。

下面的代码列出了每个人的所有课程,因为我不知道如何将client_id值传递给嵌套指令的过滤器。

<body ng-controller="MainCtrl">
  <p>Course list:</p>

  <div ng-repeat="person in clients">
    <strong><h2>{{person.client_name}} (ID: {{person.client_id}})</h2></strong>
    <ul>

      <!-- I wish it was this simple:
          <li ng-repeat="course in courses | filter : {'ordered_by' : '{{person.client_id}}' }"> -->

      <li ng-repeat="course in courses | filter : {'ordered_by' : '' }">
        {{course.course_name}}<br><span>(Ordered by person with the ID: {{course.ordered_by}})</span>
      </li>
    </ul>

  </div>


</body>

最后输出应如下:

  

安妮(ID:1)

     
      
  • 营销
  •   
  • 项目管理
  •   
  • 分析
  •   
     蒂姆(ID:2)

     
      
  • 大数据
  •   
  • 数据可视化
  •   
     

约翰(身份证号码:3)

     
      
  • PHP
  •   

我想知道是否可以这样做或者我应该看哪个方向。

使用自定义过滤器传递属性值是否可行? 表达式可以用作过滤器参数吗?

Click here to see a working copy on Plunker

2 个答案:

答案 0 :(得分:0)

试试这个:

<div ng-repeat="person in clients">
  <strong><h2>{{person.client_name}} (ID: {{person.client_id}})</h2></strong>
  <ul>
    <li ng-repeat="course in courses">
      <span ng-if="person.client_id === course.ordered_by">
        {{course.course_name}}
      </span>
    </li>
  </ul>
</div>

我还没有测试过它。

答案 1 :(得分:0)

尝试在ng-if中使用ng-repeat条件:

<li ng-repeat="course in courses" ng-if="course.ordered_by == person.client_id">
  ...
</li>

Working Plunker here