Question

我有一个像这样的JSON对象：

 var test = {"employees": [
    {"name":"John","klasse":12,"fach":"BW"},
    {"name":"max", "klasse":13,"fach":"E"},
    {"name":"Stef","klasse":14,"fach":"D"},
    {"name":"abc", "klasse":15,"fach":"AM"},
    {"name":"def", "klasse":17,"fach":"AM"},
    {"name":"John","klasse":12,"fach":"D"}
]};

在我的HTML文件中，我有3个输入字段，它们应该为我提供在JSON对象中搜索的值。

<form ng-controller="Suche">
    <span>Suchbegriff: </span><input type="text" ng-model="suchbegriff"> <br>
    <span>Klasse: </span><input type="text" ng-model="klasse"> <br>
    <span>Fach: </span><input type="text" ng-model="fach"> <br>

    <input type="submit" ng-click="submit()">

    <input type="submit" ng-click="sort()" value="Sort">

    <table>
        <tr>
            <td>Name</td>
            <td>Klasse</td>
            <td>Fach</td>
        </tr>

        <tr ng-repeat="result in results">
            <td>{{result.name}}</td>
            <td>{{result.klasse}}</td>
            <td>{{result.fach}}</td>
        </tr>

        <tr ng-hide="filter" ng-repeat="erg in json.employees">
            <td>{{erg.name}}</td>
            <td>{{erg.id}}</td>
            <td>{{erg.fach}}</td>
        </tr>

    </table>

现在我的问题。例如，我想搜索名称“John”和fach“D”。我目前的输出如下：

正如你所看到的，我没有得到我想要的输出。它应该只列出名为“John”klasse“12”和fach“D”的第三行。

如何解决此问题？

到目前为止，这是我的功能：

 $scope.submit = function () {
    $scope.results = [];

    var searchField = "name",
        searchField2 = "klasse",
        searchField3 = "fach";

    var search          = $scope.suchbegriff,
        search_class    = $scope.klasse,
        search_subject  = $scope.fach;

    if(
        search_subject == null || search_subject == ''
        && search == null || search == ''
        && search_class == null || search_class == ''
    ) {
        $scope.filter = false;
    }

    for (var i=0 ; i < test.employees.length ; i++) {
        if (
            test.employees[i][searchField] == search ||
            test.employees[i][searchField2] == search_class ||
            test.employees[i][searchField3] == search_subject
        ) {
            $scope.filter = true;
            $scope.results.push(test.employees[i]);
        } 
    }
};

我感谢任何帮助！

Answer 1

问题在于，在for...循环中，您正在推送符合任一搜索条件的员工，而不是推送符合所有搜索条件的员工。请尝试以下方法：

 $scope.submit = function () {
    $scope.results = [];

    var searchField = "name",
        searchField2 = "klasse",
        searchField3 = "fach";

    var search          = $scope.suchbegriff,
        search_class    = $scope.klasse,
        search_subject  = $scope.fach;

    var hasSearch          = !(search == null || search == ''),
        hasSearch_class    = !(search_class == null || search_class == ''),
        hasSearch_subject  = !(search_subject == null || search_subject == '');

    $scope.filter = hasSearch || hasSearch_class || search_subject;

    for (var i=0 ; i < test.employees.length ; i++) {
        if (
            (!hasSearch || test.employees[i][searchField] == search) &&
            (!hasSearch_class || test.employees[i][searchField2] == search_class) &&
            (!hasSearch_subject || test.employees[i][searchField3] == search_subject)
        ) {
            $scope.results.push(test.employees[i]);
        } 
    }
};

Answer 2

看一下我创建的这支笔。 CodePen

app.filter('employeeFilter', function() {
return function(input, name, k, f) {
name = name.toLowerCase();
k = k.toLowerCase();
f = f.toLowerCase();`

return input.filter(function(item) {
   return item.name.toLowerCase().includes(name) && item.klasse.toString().includes(k) && item.fach.toLowerCase().includes(f);
});

} }）

如果留给过滤器，这些事情会更容易。您使用了三个参数，因此，我不认为角度的默认过滤器会有任何用处。你可以简单地制作自己的。请参阅笔中的过滤器。

希望它有所帮助。

过滤JSON中的某些值

2 个答案: