Javascript 如何在单个搜索框中使用多个角度参数进行搜索？_Javascript_Json_Angularjs

Javascript 如何在单个搜索框中使用多个角度参数进行搜索？

javascript json angularjs

Javascript 如何在单个搜索框中使用多个角度参数进行搜索？,javascript,json,angularjs,Javascript,Json,Angularjs,我有一个搜索字段，我想对其应用一个过滤器，我想通过多个参数搜索我的json数据，我想以这样的方式指定参数，以便我可以在调用api时更改它们，在本代码中按名称和分支类别，但我只能按名称搜索，我不知道如何修理它，请帮忙这是我的密码 index.html <!DOCTYPE HTML> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>D

我有一个搜索字段，我想对其应用一个过滤器，我想通过多个参数搜索我的json数据，我想以这样的方式指定参数，以便我可以在调用api时更改它们，在本代码中按名称和分支类别，但我只能按名称搜索，我不知道如何修理它，请帮忙

这是我的密码

index.html

<!DOCTYPE HTML>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Dynamic Pagination w/ Filtering</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Kim Maida">

    <!-- JS Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" type="text/javascript"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>

    <!-- Angular Scripts -->
    <script src="script.js" type="text/javascript"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

</head>

<body>

    <div ng-controller="PageCtrl">
        <label>Search:</label> <input type="text" ng-model="search.name" placeholder="Search" />
        <br />


        <h1>Items</h1>
        <ul>
            <li ng-repeat="item in filtered = items | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{item.name}}  {{item.branch}}</li>

        </ul>

<!--         <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination> -->
 <ul class="pagination">
                        <li ng-class="DisablePrevPage()">
                            <a href ng-click="prevPage()">« Prev</a>
                        </li>
                        <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                            <a href="#">{{n+1}}</a>
                        </li>
                        <li ng-class="DisableNextPage()">
                            <a href ng-click="nextPage()">Next »</a>

                        </li>
                    </ul>

</body>
</html>


带过滤的动态分页
搜索：


项目

{{item.name}{{item.branch}

这是我的app.js代码

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function () {
    return function (input, start) {
        if (input) {
            start = +start;
            return input.slice(start);
        }
        return [];
    };
});

app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
    $scope.items = [{
        "name": "name 1",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "West"
    }, {
        "name": "name 2",
        "category": [{
            "category": "engineering"
        }],
        "branch": "West"
    }, {
        "name": "name 3",
        "category": [{
            "category": "management"
        }, {
            "category": "engineering"
        }],
        "branch": "West"
    }, {
        "name": "name 4",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "West"
    }, {
        "name": "name 5",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "name 6",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "name 7",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "name 8",
        "category": [{
            "category": "business"
        }],
        "branch": "West"
    }, {
        "name": "name 9",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "name 10",
        "category": [{
            "category": "management"
        }],
        "branch": "East"
    }, {
        "name": "name 11",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "name 12",
        "category": [{
            "category": "engineering"
        }],
        "branch": "West"
    }, {
        "name": "name 13",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "West"
    }, {
        "name": "name 14",
        "category": [{
            "category": "engineering"
        }],
        "branch": "East"
    }, {
        "name": "name 15",
        "category": [{
            "category": "management"
        }, {
            "category": "engineering"
        }],
        "branch": "East"
    }, {
        "name": "name 16",
        "category": [{
            "category": "management"
        }],
        "branch": "West"
    }, {
        "name": "name 17",
        "category": [{
            "category": "management"
        }],
        "branch": "East"
    }, {
        "name": "name 18",
        "category": [{
            "category": "business"
        }],
        "branch": "West"
    }, {
        "name": "name 19",
        "category": [{
            "category": "business"
        }],
        "branch": "West"
    }, {
        "name": "name 20",
        "category": [{
            "category": "engineering"
        }],
        "branch": "East"
    }, {
        "name": "Peter",
        "category": [{
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "Frank",
        "category": [{
            "category": "management"
        }],
        "branch": "East"
    }, {
        "name": "Joe",
        "category": [{
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "Ralph",
        "category": [{
            "category": "management"
        }, {
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "Gina",
        "category": [{
            "category": "business"
        }],
        "branch": "East"
    }, {
        "name": "Sam",
        "category": [{
            "category": "management"
        }, {
            "category": "engineering"
        }],
        "branch": "East"
    }, {
        "name": "Britney",
        "category": [{
            "category": "business"
        }],
        "branch": "West"
    }];

    // create empty search model (object) to trigger $watch on update
    $scope.search = {};

    $scope.resetFilters = function () {
        // needs to be a function or it won't trigger a $watch
        $scope.search = {};
    };

    // pagination controls
    // $scope.currentPage = 1;
    // $scope.totalItems = $scope.items.length;
    // $scope.entryLimit = 2; // items per page
    // $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit)-1;
             $scope.entryLimit = 2;
            $scope.currentPage = 0;
            $scope.totalLeadItems = $scope.items.length;

            $scope.range = function() {
              var rangeSize = 3;
              var ps = [];
              var start;

              start = $scope.currentPage;
              if ( start > $scope.pageCount()-rangeSize ) {
                start = $scope.pageCount()-rangeSize+1;
              }

              for (var i=start; i<start+rangeSize; i++) {
                ps.push(i);
              }
              return ps;
            };

            $scope.prevPage = function() {
              if ($scope.currentPage > 0) {
                $scope.currentPage--;
              }
            };

            $scope.DisablePrevPage = function() {
              return $scope.currentPage === 0 ? "disabled" : "";
            };

            $scope.pageCount = function() {
              return Math.ceil($scope.totalItems / $scope.entryLimit)-1;
            };

            $scope.nextPage = function() {
              if ($scope.currentPage < $scope.pageCount()) {
                $scope.currentPage++;
              }
            };

            $scope.DisableNextPage = function() {
              return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
            };

            $scope.setPage = function(n) {
              $scope.currentPage = 0;
            };


    // $watch search to update pagination
    $scope.$watch('search', function (newVal, oldVal) {
        $scope.filtered = filterFilter($scope.items, newVal);
        $scope.totalItems = $scope.filtered.length;
        $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
        $scope.currentPage = 1;
    }, true);
}]);

var-app=angular.module（'myApp'，['ui.bootstrap']）；
app.filter（'startFrom'，函数（）{
返回功能（输入、启动）{
如果（输入）{
开始=+开始；
返回input.slice（开始）；
}
返回[]；
};
});
app.controller（'PageCtrl'，['$scope'，'filterFilter'，函数（$scope，filterFilter）{
$scope.items=[{
“名称”：“名称1”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“西部”
}, {
“名称”：“名称2”，
“类别”：[{
“类别”：“工程”
}],
“分行”：“西部”
}, {
“名称”：“名称3”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“工程”
}],
“分行”：“西部”
}, {
“名称”：“名称4”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“西部”
}, {
“名称”：“名称5”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“东”
}, {
“名称”：“名称6”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“东”
}, {
“名称”：“名称7”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“东”
}, {
“名称”：“名称8”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“西部”
}, {
“名称”：“名称9”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“东”
}, {
“名称”：“名称10”，
“类别”：[{
“类别”：“管理”
}],
“分行”：“东”
}, {
“名称”：“名称11”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“东”
}, {
“名称”：“名称12”，
“类别”：[{
“类别”：“工程”
}],
“分行”：“西部”
}, {
“名称”：“名称13”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“西部”
}, {
“名称”：“名称14”，
“类别”：[{
“类别”：“工程”
}],
“分行”：“东”
}, {
“名称”：“名称15”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“工程”
}],
“分行”：“东”
}, {
“名称”：“名称16”，
“类别”：[{
“类别”：“管理”
}],
“分行”：“西部”
}, {
“名称”：“名称17”，
“类别”：[{
“类别”：“管理”
}],
“分行”：“东”
}, {
“名称”：“名称18”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“西部”
}, {
“名称”：“名称19”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“西部”
}, {
“姓名”：“姓名20”，
“类别”：[{
“类别”：“工程”
}],
“分行”：“东”
}, {
“姓名”：“彼得”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“东”
}, {
“姓名”：“弗兰克”，
“类别”：[{
“类别”：“管理”
}],
“分行”：“东”
}, {
“姓名”：“乔”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“东”
}, {
“姓名”：“拉尔夫”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“业务”
}],
“分行”：“东”
}, {
“姓名”：“吉娜”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“东”
}, {
“姓名”：“山姆”，
“类别”：[{
“类别”：“管理”
}, {
“类别”：“工程”
}],
“分行”：“东”
}, {
“姓名”：“布兰妮”，
“类别”：[{
“类别”：“业务”
}],
“分行”：“西部”
}];
//创建空搜索模型（对象）以在更新时触发$watch
$scope.search={}；
$scope.resetFilters=函数（）{
//必须是f
<li ng-repeat="item in filtered = items | filter:search.name | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{item.name}}  {{item.branch}}</li>