2014-09-01 215 views
1

我对angularjs相当新颖,所以我不确定我想要做的是正确的方法。基本上我想在我的页面中显示一个嵌套的对象和一个过滤器,这样用户可以很容易地在输入上键入关键字并且内容被过滤,只显示过滤器发现的记录对嵌套对象使用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> 
+0

您是否想要实现类似自动完成的功能?你可以考虑使用这个链接中解释的typehahaed指令:http://angular-ui.github.io/bootstrap/ – 2014-09-01 11:52:41

+0

对于那个投了这个问题的人(如果再回来阅读它),你能否提供投下的原因,如果是复制问题或太简单的问题,请提供解决方案。 – Manza 2014-09-03 06:28:51

回答

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(据我所知,您没有定义搜索函数,即过滤器表达式的第一个存储库)。

+0

我不确定我是否理解这些示例,因为它们似乎是硬编码他们想要过滤的内容? – Manza 2014-09-02 11:13:36

+0

事实上,这个例子硬编码的返回值(小评论给出了一个提示:-))。你必须推出你自己的过滤器功能(即循环你的列表并过滤出所需的项目)。这不是太难,并且与角本身无关。 – orange 2014-09-02 20:10:13

+0

根据我的第二个建议(“或,...”),您可以定义一个筛选函数来决定是否接受该值(在您的示例中,搜索参数*不是函数)不适用于您的数据结构。 – orange 2014-09-02 20:15:32

0

修改:

如果你想基于任意字段筛选的对象(说 “名”),可以使用以下格式

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

嗨,以及我很难说,过滤器将成为html上的第二行: Manza 2014-09-02 10:44:59

+0

Hi @ user668027,基于哪个字段您要筛选结果的对象“信息” – Pavi 2014-09-02 14:27:45

+0

我已更新答案。如果您需要根据其他字段进行过滤,请更新。我将尽力帮助 – Pavi 2014-09-02 14:34:41

2

按照这个例子

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

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

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

Ps。对不起,我误解了你的问题。

+0

嗨感谢您的回复,我尝试过,但它不起作用,不知道是否因为我正在搜索嵌套对象? – Manza 2014-09-02 11:10:06

+1

@ user668027是的,它不适用于嵌套属性。也许你应该自己创建一个自定义过滤器。 https://docs.angularjs.org/tutorial/step_09 – 2014-09-03 12:34:00