首页 > 代码库 > 指令Directive

指令Directive

2024-08-20 09:00:42   223人阅读

技术分享

1.ng-app

作用：规定Angular范围


创建多个ng-app时默认只执行第一个
可用模块合并解决
<body ng-app="app">
    <div ng-controller="demo1" ng-click="demo1()"></div>
    <div ng-controller="demo2" ng-click="demo2()"></div>


    <script src="http://www.mamicode.com/bower_components/angular/angular.js"></script>
    <script type="text/javascript">


        angular.module(‘app1‘, []).controller(‘demo1‘, [‘$scope‘, function($scope){
            console.log(11111);
        }]);
        angular.module(‘app2‘, []).controller(‘demo2‘, [‘$scope‘, function($scope){
            console.log(22222);
        }]);


        //模块合并
        angular.module(‘app‘, [‘app1‘, ‘app2‘]);
    </script>
</body>

 

2.ng-repeat

/*
http://www.angularjsapi.cn/#/ngRepeat
$index    number    循环的索引值
$first    boolean    是否第一次循环
$middle    boolean    是否第一次和最后一次循环之间的循环。
$last    boolean    是否最后一次循环。
$even    boolean    是否循环的次数$index为偶数。
$odd    boolen    是否循环的次数$index为奇数
*/

<body ng-app="app">


    <ul ng-controller="demo1Controller">
        <li ng-repeat="value in data">
            <span>{{$first ? $index : ‘‘}}</span>
            <span>{{value.id}}</span>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
        </li>
    </ul>


    <script src="http://www.mamicode.com/bower_components/angular/angular.js"></script>
    <script type="text/javascript">


      angular.module(‘app‘, []).controller(‘demo1Controller‘, [‘$scope‘, function($scope){


          $scope.data = [];


          for (var i = 10 - 1; i >= 0; i--) {
              var obj = {
                    id: i,
                    name: ‘名字是:‘ + i,
                    age: ‘年龄是:‘ + i
              };
              $scope.data.push(obj);
          }


      }])


    </script>
</body>

3.ng-class

<!--1、如果表达式是一个字符串，字符串应该是一个或多个空格分隔的类名称。-->
<!--2、如果表达式是数组，数组中的每个元素应该是一个字符串，即一个或多个空格分隔的类名称。-->
<!--3、如果表达式是一个对象，应用相应的类名称作为key 值为true或false。-->
<!--4、如果特定类别已被设置，该指令将不会添加重复类。-->


  <style type="text/css">
      .red {
        color: red;
      }
      .green {
        color: green;
      }
  </style>
</head>
<body ng-app="app">
    <!-- ng-class: 会根据当前设置对象的属性和属性值决定是否添加特定类名 -->
    <ul ng-controller="demo1Controller" >
        <li ng-repeat="value in data" ng-class="{red:$even,green:$odd}">
            <span>{{value.id}}</span>
            <span>{{value.name}}</span>
            <span>{{value.age}}</span>
        </li>
    </ul>



    <script src="../bower_components/angular/angular.js"></script>

技术分享

 1 <style>
 2     .red{
 3       background-color: red;}
 4 
 5     .green{
 6       background-color: green;}
 7 
 8     #box{
 9       height: 200px;
10       width: 200px;transition:background-color 1s ease;
11 }
12 </style>
13 </head>
14 <body ng-app>
15 <select ng-model="style">
16 <option value="red">红色</option>
17 <option value="green">绿色</option>
18 </select>
19 
20   <!-- <div id="box" ng-class="style"></div> -->
21 <div id="box" ng-class="{red:style==‘red‘, green:style==‘green‘}"></div>
22 
23 <script src="bower_components/angular/angular.js"></script>
24 </body>

 

指令Directive


联系
我们