[英]angularjs JSON object filter select option
我在使用select选项元素按定义的类别过滤JSON条目时遇到麻烦。 任何帮助深表感谢。
我的应用程序应该做什么:
我猜问题出在我的控制器功能中。 但是我对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'
});
}]);
HTML页面设置的一部分,带有select选项元素:
<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>
非常感谢您的帮助。
干杯
尝试指定要过滤的属性名称:
<li class="grid-item" ng-repeat="item in jobs | filter: {categories: catchange}" data-jkit="[show:delay=300;speed=500;animation=fade]">
catchange将是一个字符串,当您进行过滤时,您将遍历作为作业的每个对象。 因此,实际上,您需要将每个job.categories与catchange模型进行比较。
因此,当您执行filter:catchange时,您将每个作业对象与catchange中选定的字符串进行比较,您需要在其中将job.categories与catchange进行比较。 您可以通过确定要比较的角度来告诉angular跟踪迭代器的内容,或者可以执行以下操作:
编写一个返回布尔值的过滤器函数。 这只是一种方式
这将是视图中的过滤器,角度将每个作业作为参数传递
filter: filterCategory
这是控制器中的一项功能,需要将传入的作业类别与需要过滤的类别进行比较。 只是让它返回一个布尔值。
$scope.filterCategory = function(job){
return $scope.catchange.filter(category){
job.categories === category
}
}
编辑:上面假设多选选项,其中catchange是通过字符串存储的选定选项的数组。 如果仅是一个类别,则选择
$scope.filterCategory = function(job){
if($scope.catchange){
return job.categories === $scope.catchange
}
else {
return true
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.