AngularJS(五) 迭代器和过滤器

一.迭代器:

使用ng-repeat=“xx in xxx”


<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body></span></span>



<span style="font-size:14px;"><span style="font-size:14px;">function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "xiaomi",
     "snippet": "为发烧而生."},
    {"name": "meizu™",
     "snippet": "好看."}
  ];
}</span></span>

二.过滤器

参考链接

http://www.geekcome.com/content-10-1906-1.html

$filter函数来处理


<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
      </ul>

       </div>
  </div>
</div>
其他可以不看,只需要看

Search: <input ng-model="query">

<li ng-repeat="phone in phones | filter:query">
即可,这里绑定了一个query数据模型,使用fileter过滤保留含有该数据模型的数据。

效果图:

        

             图1.1



        图1.2



                   图1.3



使用filter过滤器:filter函数使用query的值来创建一个只包含匹配query记录的新数组。
ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值