angularjs笔记《二》
小颖最近不知怎么了，老是犯困，也许是清明节出去玩，到现在还没缓过来吧，玩回来真的怕坐车了，报了个两日游得团，光坐车了，把人坐的难受得，去了也就是爬山，回来感觉都快瘫了，小颖去的时候还把我家仔仔抱着一起去了，仔仔玩美了，上山上的没劲了，我给喝点水继续爬，上车了躺我怀里秒睡，虽然我没玩开心，但是看着我家仔仔海皮的样子也值了，以后可以多带他出来玩玩，不然老在家里呆着狗也跑不开嘻嘻，分享几张小颖出去玩得照片哈哈哈
 |
 |
 |
 |
不闲聊啦嘻嘻，下面一起看代码：
1.ng-controller
首先：
<script src="js/angular.js" charset="utf-8"></script>
然后：
<script src="js/angular.js" charset="utf-8"></script>
<script type="text/javascript">
let mod = angular.module('test', []);
mod.controller('main', function($scope) {
// 写所需变量、方法。
});
</script>t>
其次分别使用：ng-app、ng-controller
<!DOCTYPE html> <html ng-app="test"> <head> <title></title> <script src="js/angular.js" charset="utf-8"></script> <script type="text/javascript"> let mod = angular.module('test', []); mod.controller('main', function($scope) { // 写所需变量、方法。 }); </script> </head> <body ng-controller="main" ng-init="a=0;b=0"> <input type="text" ng-model="a"> <input type="text" ng-model="b"> <p ng-bind="parseIntFun(a,b)"></p> </body> </html>
实例：
小颖要实现一个在两个文本输入框中输入数字，完了将这两个数字相加，并显示在下面得 p 标签中。
使用：ng-init
方法一：
<!DOCTYPE html> <html ng-app="test"> <head> <title></title> <script src="js/angular.js" charset="utf-8"></script> <script type="text/javascript"> let mod = angular.module('test', []); mod.controller('main', function($scope) { $scope.parseIntFun = function(a, b) { return a + b; } }); </script> </head> <body ng-controller="main" ng-init="a=0;b=0"> <input type="number" ng-model="a"> <input type="number" ng-model="b"> <p ng-bind="parseIntFun(a,b)"></p> </body> </html>
方法二：
<!DOCTYPE html> <html ng-app="test"> <head> <title></title> <script src="js/angular.js" charset="utf-8"></script> <script type="text/javascript"> let mod = angular.module('test', []); mod.controller('main', function($scope) { $scope.parseIntFun = function(a, b) { return parseInt(a) + parseInt(b); } }); </script> </head> <body ng-controller="main" ng-init="a=0;b=0"> <input type="text" ng-model="a"> <input type="text" ng-model="b"> <p ng-bind="parseIntFun(a,b)"></p> </body> </html>
不使用：ng-init
方法三：
<!DOCTYPE html> <html ng-app="test"> <head> <title></title> <script src="js/angular.js" charset="utf-8"></script> <script type="text/javascript"> let mod = angular.module('test', []); mod.controller('main', function($scope) { $scope.a = 0, $scope.b = 0; $scope.parseIntFun = function(a, b) { return parseInt(a) + parseInt(b); } }); </script> </head> <body ng-controller="main"> <input type="text" ng-model="a"> <input type="text" ng-model="b"> <p ng-bind="parseIntFun(a,b)"></p> </body> </html>
方法四：
<!DOCTYPE html> <html ng-app="test"> <head> <title></title> <script src="js/angular.js" charset="utf-8"></script> <script type="text/javascript"> let mod = angular.module('test', []); mod.controller('main', function($scope) { $scope.parseIntFun = function(a, b) { if (a && !b) { b = 0; return parseInt(a) + b; } if (!a && b) { a = 0; return parseInt(b) + a; } if (a && b) { return parseInt(a) + parseInt(b); } } }); </script> </head> <body ng-controller="main"> <input type="text" ng-model="a"> <input type="text" ng-model="b"> <p ng-bind="parseIntFun(a,b)"></p> </body> </html>
2.ng-class
<!DOCTYPE html> <html ng-app="test"> <head> <title>ng-class用法</title> <script src="js/angular.js" charset="utf-8"></script> <style type="text/css"> .ceshi { color: pink; } div.sky { color: blue; } div.tomato { color: red; } div.classname1 { color: pink; } .pink { color: pink; } .blue { color: blue; } .red { color: red; } </style> <script type="text/javascript"> let mod = angular.module('test', []); mod.controller('main', function($scope) { $scope.className = [true, false, 'targe']; $scope.myclass = "ceshi"; $scope.demo = true; }); </script> </head> <body ng-controller="main"> <!-- class换成ng-class是不可用的 --> <p id="p1" ng-class="{{myclass}}">ng-class1</p> <p id="p2" class="{{myclass}}">class</p> <select ng-model="demo" ng-options="item as item for item in className"></select> <div ng-class="{true: 'sky', false: 'tomato',targe:'classname1'}[demo],{pink: pinkColor, blue: blueColor, red: redColor}">ng-class2</div> <p ng-class="{pink: pinkColor, blue: blueColor, red: redColor}">Map Syntax Example</p> <input type="checkbox" ng-model="pinkColor"> pinkColor (apply "pink" class) <input type="checkbox" ng-model="blueColor"> blueColor (apply "blue" class) <input type="checkbox" ng-model="redColor"> redColor (apply "red" class) </body> </html>
注意：当使用 ng-class="{{myclass}}" 时，是不起作用的，应该用：class="{{myclass}}"
