Фильтр ng-click, сравнивающий два массива JSON

Я пытаюсь создать фильтр Angular для переключателя с помощью ng-click, который сравнивает два отдельных объекта JSON и возвращает объект, если значение совпадает в списке ng-repeat.

Прямо сейчас я загружаю событие Api, которое возвращает объект, который выглядит примерно так:

API событий

[{
"instructor_id": 502,
"datetime": "2014-12-07T00:30:00.000Z",
"end_time": "2014-12-07T01:00:00.000Z"
}, {
"instructor_url": 510,
"datetime": "2015-01-20T16:00:00.000Z",
"end_time": "2015-01-20T16:45:00.000Z"
}]

И у меня также есть отдельный API, который извлекает список любимых инструкторов пользователя и возвращает идентификатор этого любимого инструктора, например

Favorite Instructor API

[{
"user_id": 510
}, {
"user_id": 506
}]

Я могу заставить фильтр работать, если я просто жестко запрограммирую инструктор_ид на такой фильтр:

<input type="radio" ng-click="instructor_url = {instructor_url: '510}"/>

а затем запустить фильтр в моем списке ng-repeat

<li ng-repeat="event in events | filter:instructor_url">

Но, очевидно, это не то, что я ищу. Я хочу иметь возможность вызывать функцию, которая соответствует им и возвращает только те события, в которых instuctor_id из API событий соответствует user_is из API избранного инструктора.

Любая помощь будет оценена по достоинству.


angularjs angularjs-ng-repeat angular-filters ng-repeat
person Drewbietron    schedule 10.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Пожалуйста, смотрите демо ниже

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

app.controller('firstCtrl', function($scope) {

  $scope.events = [{
    "instructor_url": 506,
    "datetime": "2014-12-07T00:30:00.000Z",
    "end_time": "2014-12-07T01:00:00.000Z"
  }, {
    "instructor_url": 510,
    "datetime": "2015-01-20T16:00:00.000Z",
    "end_time": "2015-01-20T16:45:00.000Z"
  }];


  $scope.FavoriteInstructor = [{
    "user_id": 510
  }, {
    "user_id": 506
  }];



});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">


    <label ng-repeat="user in FavoriteInstructor" ng-init="i= $parent">{{user.user_id}}
      <input type="radio" name="instructor" ng-model="i.instructor_url" ng-value="user.user_id" />
    </label>
    <label>all  <input type="radio" name="instructor" ng-model="instructor_url" ng-value="" /></label>
    <hr/>
    <p>Events</p>
    <hr/>
    <li ng-repeat="event in events | filter:instructor_url">
      <h3>Instructor Url:{{event.instructor_url}}</h3>
      <p>{{event.datetime | date:short}}-{{event.end_time | date :short}}</p>
    </li>
  </div>
</body>

person sylwester    schedule 11.12.2014
comment
Спасибо @sylwester Что, если я хочу иметь только один переключатель, который фильтрует список для всех избранных инструкторов? - person Drewbietron; 11.12.2014