angularjs Объектный фильтр JSON select option

Question

У меня возникли проблемы с фильтрацией записей JSON по определенным категориям с помощью элемента select option. Буду признателен за любую оказанную помощь.

Что мое приложение должно сделать:

1. Загрузка JSON данных из файла с помощью http.get (рабочий)
2. Данные JSON содержит название должности и категории задания (и другие данные) для каждой записи
3. Прочитайте каждый из этих записей из JSON в списке тэг на HTML (рабочий)
4. фильтра этого список по категории работы по избранной опции элемент (не работает)

Я предполагаю, что проблема лежит где-то в моей функции контроллера. Но я совершенно новичок в angularjs, поэтому я не мог понять, в чем проблема ... Любая помощь очень ценится.

первые две записи моего JSON-файл с тегом "категорией" в нем:

[{ 
    "jobtitle":"Multimedia Producer", 
    "name":"A. Text", 
    "shortname":"atext", 
    "shortdescription":"Werbeagentur", 
    "team":"XXX", 
    "lookingfor":"XXX", 
    "jobdescription":"XXX", 
    "portfolio":"XXX", 
    "contact":"XXX" , 
    "categories":"none" 
    }, 
    { 
    "jobtitle":"Kameraassistent", 
    "name":"Movie & Art", 
    "shortname":"movie_art", 
    "shortdescription":"Corporate Movies and more...", 
    "team":"XXX", 
    "lookingfor":"XXX", 
    "jobdescription":"XXX", 
    "portfolio":"XXX", 
    "contact":"XXX", 
    "categories":"photography" 
    }] 

В controller.js:

var myApp = angular.module('myApp', []); 
myApp.controller('MyController', ['$scope', '$http', function ($scope, $http){ 
    $http.get('js/data.json').success(function(data){ 
    $scope.jobs = data; 
    $scope.catchange = 'categories' 
    }); 
}]); 

часть установки HTML-странице с выбором опции элемент:

<div ng-controller="MyController"> 
    <span class="input"> 
     <select ng-model="catchange" class="cs-select cs-skin-underline"> 
      <option value="none">Suche nach Kategorien</option> 
      <option value="photography">Fotografie</option> 
      <option value="text">Text</option> 
      <option value="digital">Digital</option> 
      <option value="print">Print</option> 
      <option value="consulting">Beratung</option> 
      <option value="advertising">Werbung</option> 
      <option value="socialmedia">Social Media</option> 
      <option value="strategy">Strategie</option> 
      <option value="conception">Konzeption</option> 
      <option value="film">Film</option> 
      <option value="tv">TV</option> 
     </select> 
    </span> 
</div> 

<div class="searchlisting" ng-controller="MyController"> 
    <ul class="portfolio-grid">  
     <li class="grid-item" ng-repeat="item in jobs | filter: catchange" data-jkit="[show:delay=300;speed=500;animation=fade]"> 
      <img ng-src="img/searchlist/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}"> 
      <a class="ajax-link" href="single.html"> 
       <div class="grid-hover"> 
        <h1>{{item.jobtitle}}</h1> 
        <p>{{item.name}}</p> 
       </div> 
      </a> 
     </li> 
    </ul> 
</div> 

Большое спасибо за помощь.

Приветствия

Answer 1

catchange будет строкой, а при фильтрации, вы итерации каждого объекта, который является работой. Так что, действительно, вам нужно сравнивать каждую категорию job.categories против модели catchange.

Поэтому, когда вы выполняете фильтр: catchange, вы сравниваете каждый объект задания с выбранной строкой в ​​catchange, где вам нужно сравнивать job.categories с catchange. Вы можете сказать angular, что отслеживать итератор, чтобы быть уверенным, что это сравнивается, или вы можете сделать следующее:

Напишите функцию фильтра, которая возвращает логическое значение. Это только один из способов

это будет фильтр в виде, угловой проходит каждую работу как пары

filter: filterCategory 

Это будет функцией в контроллере, который необходимо сравнить поступающую категорию работы с которые необходимо отфильтровать. Просто верните логическое значение.

$scope.filterCategory = function(job){ 
    return $scope.catchange.filter(category){ 
     job.categories === category 
    } 
} 

Редактирование: Вышеупомянутые опции multi-select, где catchange - это массив выбранных опций, хранящихся в строке. Если это когда-либо будет только одна категория, выберите

$scope.filterCategory = function(job){ 
    if($scope.catchange){ 
     return job.categories === $scope.catchange 
    } 
    else { 
     return true 
    } 
} 

Answer 2

Попробуйте указать имя свойства, которое вы хотите фильтра:

<li class="grid-item" ng-repeat="item in jobs | filter: {categories: catchange}" data-jkit="[show:delay=300;speed=500;animation=fade]">