angularJS搜索模型

发布时间：2020-12-17 17:12:26 所属栏目：安全来源：网络整理

导读：我是angularJS的新手.我需要对 JSON数据执行搜索.这是一个示例JSON结构 countries = [{ "country_name" : "India","stations" : [ { "name": "Dream Factory" } ]},{ "country_name" : "Indonesia","stations" : [ { "name": "Drummer Factory" },{ "name":

我是angularJS的新手.我需要对 JSON数据执行搜索.这是一个示例JSON结构

countries =   [
{
    "country_name" : "India","stations" : [
        {
            "name": "Dream Factory"
        }
    ]
},{
    "country_name" : "Indonesia","stations" : [
        {
            "name": "Drummer Factory"
        },{
            "name": "Beats"
        }
    ]
}
]

假设我输入Ind,我需要匹配字符串的国家并返回印度和印度尼西亚
在其他字段中,键入Factory应检索与字符串匹配的站名(此处为Drummer Factory,Dream Factory).

实现这个目标的简单方法是什么？
是否有任何内置指令解决这个问题或者我可以使用过滤器,如果是,请发布示例…

解决方法

您可以使用名为“filter”的过滤器(是的,这有点令人困惑)： http://docs.angularjs.org/api/ng.filter:filter

这是一个演示：http://jsfiddle.net/g/pXnRs/4/

HTML：

<div ng-controller="CountryController">
    Filter: <input ng-model="nameFilter" />
    <ul>
        <li ng-repeat="country in countries | filter: nameFilter">
            {{country | json}}
        </li>
    </ul>      
</div>?

JS：

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

app.controller('CountryController',function($scope){
    $scope.nameFilter = '';
    $scope.countries = [
    {
        "country_name" : "India","stations" : [
            {
                "name": "Dream Factory"
            }
        ]
    },{
        "country_name" : "Indonesia","stations" : [
            {
                "name": "Drummer Factory"
            },{
                "name": "Beats"
            }
        ]
    }];
});

angular.bootstrap(document,['app']);

如果仅需要将站点作为结果,则应首先将JSON对象层次结构展平为站点列表.????

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!