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>

  • 相关阅读:
    centOS7 mini配置linux服务器(三) 配置防火墙以及IPtables切换
    Linux的常用基本命令。
    centOS7 mini配置linux服务器(二) 配置IP
    分享Git的一些个人配置
    Firefox中Vimperator插件配置
    Linux下修改键盘默认布局
    Git对于单个文件的分批提交方式的使用
    Linux安装Monaco字体
    浮点与整形在GUI下的相关思考
    2D简单图形相关算法罗列
  • 原文地址:https://www.cnblogs.com/yewook/p/8075355.html
Copyright © 2011-2022 走看看