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

来源：互联网发布：淘宝运动鞋店铺排行榜编辑：程序博客网时间：2024/05/22 06:59

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>

0 0