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>

  • 相关阅读:
    maven加载jar包配置
    JavaScript基础博客
    angularjs1 实现地图添加自定义控件(搜索功能)及事件
    AngularJS之Directive,scope,$parse
    HTML5 File详解
    angularjs上传图片
    input上传按钮美化
    AngularJs表单验证
    作用域与闭包
    理解JavaScript中的作用域和上下文
  • 原文地址:https://www.cnblogs.com/yewook/p/8075355.html
Copyright © 2011-2022 走看看