《我的Angular入坑记》——通过小例子看ng-repeat

        为了简单方便一点,笔者这里的数据全部都是在前台硬加上去的,一般项目里的数据都是通过后台抓取的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="hd" ng-controller="ctrl">
    <ul>
        <!--{{$first}}第一个  {{$last}}最后一个  {{$middle}}中间的  {{$even}}偶数行  {{$odd}}奇数行-->
        <li ng-repeat="(k,v) in data" style="{{k==0?'color:red':''}}">
            <!--k是下标-->
            {{k}}
            名称:{{v.name}} 网址:{{v.url}}
        </li>
        <hr/>
        <li ng-repeat="(k,v) in data" style="{{$even?'color:red':''}}">
            <span ng-if="$first" style="{{$first?'color:red':''}}">名称:{{v.name}} 网址:{{v.url}}</span>
            <span ng-if="$middle">名称:{{v.name}} 网址:{{v.url}}</span>
            <span ng-if="$last" style="{{$last?'color:green':''}}">名称:{{v.name}} 网址:{{v.url}}</span>
        </li>
        <hr/>
        <!--以下标为判断唯一性的标志,若有两个相同的元素则都输出-->
        <li ng-repeat="v in info track by $index">
            {{v}}
        </li>
    </ul>
</div>
<script>
    var m = angular.module('hd', []);
    m.controller('ctrl', ['$scope', function ($scope) {
        $scope.data = [
            {name: '麻花腾', url: 'mht.com'},
            {name: '麻云', url: 'my.com'},
            {name: '李彦红', url: 'lyh.com'},
        ];
        $scope.info=['麻花腾','麻云','李彦红','BAT','BAT'];
    }]);
</script>
</body>
</html>

        上述demo中的  (k,v) in data 是为了能在循环数据的同时对特别的数据进行操作,如何判断那一个是我们想要操作的数据呢?只能通过下标来判断,所以就需要添加一个下标k的标识来辅助我们进行判断。

        同时,如果存放数据的数组或者对象中有相同的数据,但是你又想要都输出,那么在使用ng-repeat进行遍历的时候就需要特别加上一句话    track by $index       以下标为判断唯一性的标志,而不是判断内容是否相同。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值