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

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeattitle>
    <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开始。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeattitle>
    <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> 姓名:{{stu.name}}span>
            <span> 年龄:{{stu.age}} span>
            <span> 是否是首条:{{$first ? '是' : '否'}} span>
            <span> 是否是中间条:{{$middle ? '是' : '否'}}span>
            <span> 是否是末条:{{$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>

你可能感兴趣的:(Angular学习,angularjs)