angularjs过滤嵌套对象

时间:2014-09-01 11:27:43

标签: angularjs angularjs-ng-repeat

我对angularjs很新,所以我不确定我想要做的是正确的方法。基本上我想在我的页面中显示嵌套对象和过滤器,这样用户可以轻松地在输入上键入关键字并对内容进行过滤,以仅显示过滤器找到的重新编码

但是我注意到过滤器获取整个父对象,我只期望显示记录,所以使用以下代码,如果我搜索日本,它将显示悉尼,墨尔本和洛杉矶。

的Javascript

<script type="text/javascript">
    var demoApp = angular.module('demoApp',['ngSanitize']);
    demoApp.controller('simpleC',['$scope', function ($scope){
        $scope.info = [
        {name: 'Documents',links:  [
                {linkname:'title1',linknamesublink:[
                        {namesublink:'document 1', description: 'Sydney'},
                        {namesublink:'document 2', description: 'Tokyo <b>Japan</b>'}
                        ]},
                {linkname:'title2',linknamesublink:[
                        {namesublink:'document 3', description: 'Melbourne'},
                        {namesublink:'document 4', description: 'Los Angeles'}
                        ]}
                ]},
        {name: 'Video',links:  [
                {linkname:'title1',linknamesublink:[
                        {namesublink:'video 1', description: 'California'},
                        {namesublink:'video 2', description: 'San Francisco <b> USA</b>'}
                        ]},
                {linkname:'title2',linknamesublink:[
                        {namesublink:'video 3', description: 'South America'},
                        {namesublink:'video 4', description: 'Northern <b>Europe</b>'}
                        ]},
                {linkname:'title3',linknamesublink:[
                        {namesublink:'video name 5', description: 'Africa'},
                        {namesublink:'video name 6', description: 'Bangkok <b>Thailand</b>'}
                        ]}
                ]},
        ];
    }]);
</script>

html:

<div class="container" ng-app="demoApp">
    <br /><input type="text" class="form-control" ng-model="search" >           
    <div ng-controller="simpleC">
        <div ng-repeat="i in info | filter:search" >
            {{i.name}}  : 
            <div ng-repeat="link in i.links">
                {{link.linkname}}
                    <div ng-repeat="sublink in link.linknamesublink">
                            {{sublink.namesublink}}: <!--{{sublink.description}}-->
                            <span ng-bind-html="sublink.description"></span>
                    </div>
            </div>
        </div>    
    </div>
</div>  

3 个答案:

答案 0 :(得分:2)

请按照此示例

http://www.whatibroke.com/?p=857

您可以在ng-repeat中使用过滤器按属性过滤项目或自行编写过滤器。

作者希望通过searc_postcode的值过滤邮政编码属性。所以,他写了//过滤{postcode:search_postcode} //

聚苯乙烯。对不起,我误解了你的问题。

答案 1 :(得分:0)

编写自己的过滤功能。这样,您就可以完全控制返回的内容。 https://docs.angularjs.org/api/ng/filter/filter

module.filter('searchfilter', function() {
  return function(searchexpr) {
   var filteredList = ['my', 'filtered', 'result'];//implement yourself
   return filteredList;   
  }; 
});

并在标记中使用searchfilter代替filter

或者,尝试使用此处所述的过滤函数:http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/filtering-and-sorting-a-list.html(据我所知,您没有定义搜索函数,即过滤器表达式的第一个文档)。

答案 2 :(得分:0)

修改:

如果您想根据任何字段过滤对象(例如&#34;名称&#34;),您可以使用以下格式

<div ng-repeat="i in info" ng-if="search==i.name">