div#cpmenu {height:200px;float:left;}
div#cpcontent {height:200px;width:150px;float:left;}
文章作者：松阳
原文链接：http://blog.csdn.net/fansongy/article/details/44106207
数据
“I‘m string”
123
{A:"I‘m",B:"Dictory"}
{"I","am","array"}
基本数据使用 ng-init,ng-bind 关联。
<div ng-init="firstName=‘Json‘"> <p><span ng-bind="firstName"></span></p> </div>
表达式
可以写在文本区域的内容，表达方式为：{{expression}}它其实定价于ng-bind。
<p>My express:{{"check Now~"+firstName}}</p>
指令
- ng-app 指令定义了 AngularJS 应用程序的根元素。
- ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
<div ng-app="" ng-init="names=[
{name:‘Jani‘,country:‘Norway‘},
{name:‘Hege‘,country:‘Sweden‘},
{name:‘Kai‘,country:‘Denmark‘}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>
</div>
控制器
注意 脚本加载要放在使用前 例如在head中：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var myModel = angular.module("myModel",[]);
myModel.controller("myController",function($scope) {
$scope.persion = {
firstName:"Dan",
lastName:"Jao"
};
});
</script>
</head>
使用控制器要先声明一个对应的module。如上面的代码，使用angular.module(‘appName‘,[‘dependcyModuleNmae‘])来实现，并调用controller方法添加对应的controller。使用时直接使用对应的$scope即可
<div ng-app="myModel" ng-controller="myController">
FirstName:<input type="text" ng-model="persion.firstName"><br>
LastName:<input type="text" ng-model="persion.lastName"><br>
Whole: {{persion.firstName+" "+persion.lastName}}
</div>
一个页面控制器只能加载一个ng-app，它相当于main()。
过滤器
使用管道符可开启过滤功能
- currency 格式化数字为货币格式。
- filter 从数组项中选择一个子集。
- lowercase 格式化字符串为小写。
- orderBy 根据某个表达式排列数组。
- uppercase 格式化字符串为大写。
例如：
{{ (x.name |uppercase)+","+x.others }}
<p>总价 = {{ (quantity * price) | currency }}</p>
<li ng-repeat="x in names | orderBy:‘country‘">
事件
向上传播事件$emit(‘myEvent‘)，同层传播时间$broadcast(‘myEvent‘) 收事件使用：
$scope.$on(‘myEvent‘),function() {
$scope.count++;
}
$scope
$scope是angularjs的基础。它是树形结构，根节点为`$rootScope。可以使用angular.element($0).scope()`进行调试。
如果你觉得这篇文章对你有帮助，可以顺手点个顶，不但不会喜当爹，还能让更多人能看到它... 
时间： 2024-10-09 22:37:38