angularjs JSON object filter select option

Question

I'm having trouble with filtering JSON entries by defined categories with a select option element. Any help is much appreciated.

What my App should do:

1. Load JSON data from file by http.get (working)
2. The JSON data contains a job title and a job category (and other data) for each entry
3. Read each of these entries from JSON into a list-tag on html (working)
4. filter this list by a job category by a select option element (not working)

I guess the problem lies somewhere in my controller function. But I'm quite new to angularjs so I couldn't find out what the problem is... Any help is much appreciated.

first two entries of my JSON file with the tag "categories" in it:

   [{
    "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"  
   }]

The 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'
    }); 
}]);

Part of the HTML-page setup with the select option element:

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

Many thanks for any help.

Cheers

Answer 1

尝试指定要过滤的属性名称：

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

Answer 2

catchange will be a string, and when you filter, you are iterating over each object that is a job. So really, you need to be comparing each job.categories against catchange model.

Therefore, when you are doing filter:catchange, you are comparing each job object against the selected string in catchange, where you need to be comparing job.categories to catchange. You can tell angular what to track an iterator by to make sure it is comparing, or you can do the following:

Write a filter function that returns a boolean. This is just one way

this will be the filter in the view, angular passes each job as a param

filter: filterCategory

This will be a function in your controller that needs to compare the incoming job category with the categories that need to be filtered out. Just have it return a boolean.

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

edit: Above assumes multi-select options, where catchange is an array of selected options stored via string. If it only ever going to be a single category select then

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