Javascript AngularJSON对象过滤器选择选项

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

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

通过http.get从文件加载JSON数据（工作）

JSON数据包含每个条目的职务和职务类别（以及其他数据）

将JSON中的每个条目读入html上的列表标记（工作）

按“选择选项”元素按职务类别筛选此列表（不工作）

我想问题出在我的控制器功能的某个地方。但我对angularjs很陌生，所以我无法找出问题所在。。。非常感谢您的帮助

我的JSON文件的前两个条目中带有标记“categories”：

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 option元素的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>

Suche nach Kategorien
福托格拉菲
正文
数字的
印刷品
伯朗
沃邦
社会化媒体
策略
康采普
胶卷
电视

非常感谢你的帮助

---

干杯

尝试指定要筛选的属性名称：

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

尝试指定要筛选的属性名称：

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

---

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

---

我不明白这条线代表什么<代码>$scope.catchange='categories'。您实际上是在将筛选器设置为字符串

“categories”

，这甚至不是选择列表中的有效选项。是的，我认为这就是问题所在。谢谢你，克莱斯。我如何修复这个问题，它需要相应的条目？抱歉-我不熟悉angular…它应该做什么：用户在选择列表中选择一个条目（类别），angular将只显示JSON文件中相应的条目（=类别标记）。guidokoch.ch/jobplattform/jobsuche.htmlok，让我们来分析一下您在这里试图做的事情。您的服务正在获取作业列表，您希望根据下拉列表对其进行筛选。为什么在你收到数据的那一刻，你甚至需要将下拉列表的值设置为任何值？好的，在重新加载我的浏览器后，我可以使用下拉列表；然而，检查控制台时，您的服务似乎抛出了一个404来获取您的数据，并且没有任何要过滤的内容。我不明白这一行应该代表什么<代码>$scope.catchange='categories'。您实际上是在将筛选器设置为字符串

“categories”

，这甚至不是选择列表中的有效选项。是的，我认为这就是问题所在。谢谢你，克莱斯。我如何修复这个问题，它需要相应的条目？抱歉-我不熟悉angular…它应该做什么：用户在选择列表中选择一个条目（类别），angular将只显示JSON文件中相应的条目（=类别标记）。guidokoch.ch/jobplattform/jobsuche.htmlok，让我们来分析一下您在这里试图做的事情。您的服务正在获取作业列表，您希望根据下拉列表对其进行筛选。为什么在你收到数据的那一刻，你甚至需要将下拉列表的值设置为任何值？好的，在重新加载我的浏览器后，我可以使用下拉列表；然而，检查控制台时，您的服务似乎抛出了一个404获取您的数据，并且没有任何要过滤的内容。非常感谢。我试过了，但没用。链接到