angularjs JSON 对象过滤器 select 选项

Question

我在使用 select 选项元素按定义的类别过滤 JSON 条目时遇到问题。非常感谢任何帮助。

我的应用应该做什么：

通过 http.get 从文件加载 JSON 数据（工作）
JSON 数据包含每个条目的职位名称和职位类别（以及其他数据）
将 JSON 中的每个条目读入 html 上的列表标签（工作）
通过 select 选项元素按工作类别过滤此列表（无效）

我想问题出在我的控制器函数中。但我对 angularjs 很陌生，所以我无法找出问题所在...非常感谢任何帮助。

我的 JSON 文件的前两个条目，其中包含标签 "categories"：

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

带有 select 选项元素的 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

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

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

Answer 2

catchange 将是一个字符串，当您过滤时，您将遍历每个作为作业的对象。所以真的，你需要将每个 job.categories 与 catchange 模型进行比较。

因此，当您执行 filter:catchange 时，您会将每个作业对象与 catchange 中的 selected 字符串进行比较，而您需要将 job.categories 与 catchange 进行比较。您可以告诉 angular 跟踪迭代器的内容以确保它正在比较，或者您可以执行以下操作：

编写一个 return 布尔值的过滤器函数。这只是一种方式

这将是视图中的过滤器，angular 将每个作业作为参数传递

filter: filterCategory

这将是您控制器中的一个函数，需要将传入的作业类别与需要过滤掉的类别进行比较。只需要 return 一个布尔值。

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

edit：以上假设有多个 select 选项，其中 catchange 是通过字符串存储的 selected 选项数组。如果它永远只是一个类别 select 那么

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

angularjs JSON 对象过滤器 select 选项

angularjs JSON object filter select option

javascript

json

angularjs

html-select