在ng-click上使用数组过滤多个Angularjs

时间:2017-01-22 11:14:38

标签: javascript angularjs json

我有两个对象。 //首先是项目

JPA

对于cat j json

{
 catId : [1, 2, 3],
 name : "My name is George"
},
{
 catId : 1,
 name : "My name is Bob"
},
{
 catId : 2,
 name : "My name is Trump"
}

我希望用户在ng-repeat之后点击类别json并在获得类别ID之后使用category.Id过滤我的items对象。

https://plnkr.co/edit/x2O3Q4AA33xwbeqFupAM?p=preview

1 个答案:

答案 0 :(得分:0)

试试这个



// Code goes here

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

app.controller('myController', function($scope){
  $scope.items = [
          {
            Name: "My name is George",
            catId: [ 1, 3, 7 ]
          },
          {
            Name: "My name is Bob",
            catId: 1
          },
          {
            Name: "My name is Trump",
            catId: 2
          }];

  $scope.cats = [
          {
            Name: "Hello",
            Id: 1
          },
          {
            Name: "World",
            Id: 3
          }];
          
          $scope.setCatFilter = function(id){
           $scope.catFilter = id; 
          }
          
          
})

/* Styles go here */

span {
  width: 20px;
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  text-align: center;
  margin-right: 5px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myController">
    <div>Filter items</div>
    <span ng-repeat="cat in cats" ng-click="setCatFilter(cat.Id)">{{cat.Id}}</span>
    <div>Category</div>
    <input type="text" ng-model = "serachName">
    <div ng-repeat="item in items | filter:{catId:catFilter,Name:serachName}">
      {{item.Name}}
    </div>
  </div>
&#13;
&#13;
&#13;