AngularJS-4-循环绑定

一、绑定

<html ng-app="lesson" ng-controller="lesson4">

<table>

<thead><th>姓名</th><th>年龄</th><th>星座</th><th>工作年限</th></thead>

<tbody>

<tr ng-repeat="x in UserEntityList">

<td>{{x.Name}}</td><td>{{x.Age}}</td><td>{{x.Constellation}}</td><td>{{x.WorkYear}}</td>

</tr>

</tbody>

</table>

<script src=”scripts/angular-1.1.1.min.js“></script>

<script>

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

app.controller("lesson4",function($scope){

$scope.UserEntityList=[

{'Name':'Tom','Age':26,'Constellation':'水瓶座','WorkYear':19},

{'Name':'Jerry','Age':27,'Constellation':''巨蟹座','WorkYear':5},

{'Name':'David','Age':28,'Constellation':''天秤座','WorkYear':6},

{'Name':'Tim','Age':39,'Constellation':''摩羯座','WorkYear':7}

]

})

</script>

二、过滤器

1、排序

正序:<tr ng-repeat="x in UserEntityList | orderBy:'Age'">

倒序:<tr ng-repeat="x in UserEntityList | orderBy:'Age':true">

2、组合排序

正序:<tr ng-repeat="x in UserEntityList | orderBy:['Age','WorkYear']">

倒序:<tr ng-repeat="x in UserEntityList | orderBy:['Age','-WorkYear']">

3、大写输出

{{x.Name | uppercase}}

4、序号

<tr ng-repeat="x in UserEntityList">

{{ $index }}

</tr>

5、过滤器

显示带39的(模糊查询):<tr ng-repeat="x in UserEntityList | orderBy:['Age','WorkYear'] | filter:39">

显示39的(精准查询):<tr ng-repeat="x in UserEntityList | orderBy:['Age','WorkYear'] | filter:{‘Age’:39}">

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值