angularjs之循环遍历

来源：互联网发布：泰格软件好用吗编辑：程序博客网时间：2024/06/04 19:20
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/angular.min.js"></script>    </head>    <body>        <!--            key 代表索引 value代表值            $first 第一个            $last 最后一个            $middle 中间            $even:偶数            track by $index  ngRepeat不允许collection中存在两个相同Id的对象,$index以索引为依据进行遍历，避免相同items引起的错误        -->        <div ng-app="hd" id="" ng-controller="ctrl">            <ul>                <li ng-repeat="(k,v) in data track by $index">                    <sapn ng-if="$first" style="color:red">{{k}} 名称：{{v.name}} 网址：{{v.url}}</sapn>                    <span ng-if="$middle">{{k}} 名称：{{v.name}} 网址：{{v.url}}</span>                    <span ng-if="$last" style="color: blue;">{{k}} 名称：{{v.name}} 网址：{{v.url}}</span>                </li>            </ul>        </div>        <script>            var m = angular.module("hd", []);            m.controller("ctrl", ["$scope", function($scope) {                $scope.data = [{                    name: '百度',                    url: 'http://baidu.com'                }, {                    name: '腾讯',                    url: 'http://qq.com'                },{                    name:"新浪",                    url:"http://sina.com"                }];            }]);        </script>    </body></html>
0 0