AngularJS学习记录-指令复制元素

最新推荐文章于 2021-06-22 23:36:51 发布

web_LamHo

最新推荐文章于 2021-06-22 23:36:51 发布

阅读量663

点赞数

分类专栏： Angular学习文章标签： angularjs

本文链接：https://blog.csdn.net/web_LamHo/article/details/51277668

版权

Angular学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS学习记录-指令复制元素

需要使用的指令是ng-repeat或data-ng-repeat
首先它的功能是根据绑定的数组的成员数量，然后循环复制绑定的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="myCtr">

    <ul>
        <li ng-repeat="stu in arr">姓名：{{stu.name}},年龄：{{stu.age}}</li>
    </ul>

<script>
    var app = angular.module('app',[]);

    app.controller('myCtr',['$scope',function($scope){

        $scope.arr = [
            {
                name:'小明',
                age:'18'
            },
            {
                name:'小华',
                age:'22'
            },
            {
                name:'小花',
                age:'19'
            }
        ]

    }])

</script>
</body>
</html>

例子上就是ng-repeat根据绑定的数组进行循环，然后根据stu就是表示循环到的当前数组，再获取数组中对象，然后根据{{}}表达式中拿到循环到的数组中的name和age，循环输出到界面中。

ng-repeat还提供了以下实用的API：

$first 该变量表示当前循环的小标是否是首条，如果是返回true否则返回false。
$last 该变量表示当前循环的小标是否是末条，如果是返回true否则返回false。
$middle 该变量表示当前循环的小标是否是中间条，如果是返回true否则返回false。
$index 该变量表示当前循环的下标，其对应是从0开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="myCtr">

    <ul>
        <li ng-repeat="stu in arr">
            <span>序号：{{$index}}</span>
            <span>&nbsp;姓名：{{stu.name}}</span>
            <span>&nbsp;年龄：{{stu.age}} </span>
            <span>&nbsp;是否是首条：{{$first ? '是' : '否'}} </span>
            <span>&nbsp;是否是中间条：{{$middle ? '是' : '否'}}</span>
            <span>&nbsp;是否是末条：{{$last ? '是' : '否'}} </span>
        </li>
    </ul>

<script>
    var app = angular.module('app',[]);

    app.controller('myCtr',['$scope',function($scope){

        $scope.arr = [
            {
                name:'小明',
                age:'18'
            },
            {
                name:'小华',
                age:'22'
            },
            {
                name:'小花',
                age:'19'
            }
        ]

    }])

</script>
</body>
</html>