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="../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="../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>
时间： 2024-08-19 14:11:16