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

最新推荐文章于 2018-09-10 18:12:46 发布

皮蛋瘦肉没有肉

最新推荐文章于 2018-09-10 18:12:46 发布

阅读量411

点赞数

分类专栏： Angular 文章标签： angular 前端 html

本文链接：https://blog.csdn.net/zzp961224/article/details/70336348

版权

Angular 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<!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>