angularjs JSON对象过滤器选择选项

时间:2015-08-04 13:32:10

标签: javascript json angularjs html-select

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

我的应用程序应该做什么:

  1. 通过http.get(工作)
  2. 从文件加载JSON数据
  3. JSON数据包含每个条目的职位和职位类别(以及其他数据)
  4. 将每个条目从JSON读取到html(工作)
  5. 上的list-tag中
  6. 按作业类别按选择元素(不工作)
  7. 过滤此列表

    我想问题出在我的控制器功能中。但我对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>
    

    非常感谢您的帮助。

    干杯

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

因此,在进行过滤:catchange时,您将每个作业对象与catchange中的所选字符串进行比较,您需要将job.categories与catchange进行比较。你可以告诉angular跟踪迭代器的内容,以确保它正在进行比较,或者你可以执行以下操作:

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

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

filter: filterCategory

这将是您的控制器中的一个功能,需要将传入的作业类别与需要过滤的类别进行比较。让它返回一个布尔值。

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

edit:Above假设有多选项,其中catchange是通过字符串存储的所选选项的数组。如果它只是一个类别选择那么

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