zoukankan      html  css  js  c++  java
  • AngularJS例子 ng-repeat遍历输出

    <!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>
  • 相关阅读:
    pat00-自测5. Shuffling Machine (20)
    Spiral Matrix
    Search in Rotated Sorted Array II
    Search in Rotated Sorted Array
    Best Time to Buy and Sell Stock II
    4Sum
    3Sum Closest
    3Sum
    MySQL存储过程、函数和游标
    Word Ladder
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/6826131.html
Copyright © 2011-2022 走看看