zoukankan      html  css  js  c++  java
  • angular笔记_6

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="hd" ng-controller="ctrl">
    {{data}}
    <hr/>
    <ul>
    <li ng-repeat="(k,v) in data" style="{{$first?'color:red':'';}}">
    {{k}}名称:{{v.name}} 网址:{{v.url}}</li>
    </ul>
    <hr/>
    <ul>
    <li ng-repeat="(k,v) in data" style="{{$middle?'color:red':'';}}">
    {{k}}名称:{{v.name}} 网址:{{v.url}}</li>
    </ul>
    <hr/>
    <ul>
    <li ng-repeat="(k,v) in data" style="{{$last?'color:red':'';}}">
    {{k}}名称:{{v.name}} 网址:{{v.url}}</li>
    </ul>
    <hr/>
    <ul>
    <li ng-repeat="(k,v) in data" style="{{k==2?'color:red':'';}}">
    {{k}}名称:{{v.name}} 网址:{{v.url}}</li>
    </ul>
    <hr/>
    <ul>
    <li ng-repeat="(k,v) in data" ng-if="$first" style="{{$first?'color:red':'';}}">
    <span>{{k}}名称:{{v.name}} 网址:{{v.url}}</span>
    </li>
    <li ng-repeat="(k,v) in data" ng-if="$middle" style="{{$middle?'':'';}}">
    <span >{{k}}名称:{{v.name}} 网址:{{v.url}}</span>
    </li>
    <li ng-repeat="(k,v) in data" ng-if="$last" style="{{$last?'color:green':'';}}">
    <span >{{k}}名称:{{v.name}} 网址:{{v.url}}</span>
    </li>
    </ul>
    <hr/>
    <ul ng-repeat="v in arr track by $index">
    {{$index}}{{v}}
    </ul>

    </div>

    <script>
    var m=angular.module('hd',[]);
    m.controller('ctrl',['$scope',function($scope){
    //数组对象
    $scope.data=[{name:'百度',url:'baidu.com'},
    {name:'新浪',url:'sina.com'},
    {name:'搜狐',url:'souhu.com'},
    {name:'博客',url:'blog.com'}
    ];
    //数组
    $scope.arr=['百度','新浪','搜狐','搜狐'];

    }]);
    </script>
    </body>
    </html>

  • 相关阅读:
    研修班第四次课笔记
    形象革命——穿搭
    对管理者的几点要求
    全链路压测
    项目管理最忌的5件事,千万不要忽视!
    2018年计划小目标(9月)PMP
    NLP是什么
    (深度好文)重构CMDB,避免运维之耻
    《转》我们不得不面对的中年职场危机
    项目管理,让自己更从容
  • 原文地址:https://www.cnblogs.com/yewook/p/8075355.html
Copyright © 2011-2022 走看看