複数のAngularjsをng-clickで配列でフィルタリングする

Question

私は2つのオブジェクトを持っています。アイテム

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

そしてCATIDのJSON

{ 
Id : 1, 
name : "Hi" 
}, 
{ 
Id : 3, 
name : "world" 
} 

のために、私はリピートngの後、カテゴリJSONでたときに、ユーザーのクリックをしたいため //まず、それは私の項目をフィルタ処理した後、カテゴリIDを取得するには、category.Idを持つオブジェクト。

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

Answer 1

この

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