Angular JS（1）
1、表达式
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<script src="./angular.min.js"></script>
</head>
<body ng-init="name='sun';age=13">
{{ 5*4 }}
{{ 5>4?"真":"假"}}
<h1>{{name +"--"+age}}</h1>
<input type="text" ng-model="one">
*
<input type="text" ng-model="two">
=
{{one*two}}
</body>
2、内置指令
凡是以ng- 开始的，都称为内置指令
ng-app 用于表示一个angularjs应用
Angular会从ng-app所在的标签开始，管理这个应用
一个页面（应用）中，建议只存在一个ng-app
如果有多个，需要手动启动对应的应用
目前ng-app=" "表示使用默认的angular 应用
ng-init='a=b;c=d;...';
使用 ng-init 初始的数据，会挂载到根作用域
在开发正式项目时，不建议使用ng-init做数据初始化
应该交由controller去完成
ng-model 将（表单）视图与模型进行（双向）绑定
ng-repeat 遍历对象
遍历数组：ng-repeat="x in arr"
遍历对象：ng-repeat=" (key,val) in obj"
属性： $first 是否是第一项
$last 是否是最后一项
$middle 是否是中间项
$index 下标值
track by $index Angular需要一个不重复的值去跟踪数据的变化，当数组内有重复时，将导致angular 无法正常跟踪对应的值，需要使用track by $index 为遍历指定一个唯一不重复的值。
ng-class为元素指定样式名
ng-class="{true:'class1',false:'class2'}[bol]" 由 Bol 决定添加哪个样式
ng-class="{'class1':bol1,'class2':bol2,'classN':bolN}"由各个变量决定是否添加指定的样式
ng-style 为元素添加样式
ng-style=" { style1:'style',...}"
ng-show是否显示元素，true显示，false隐藏
ng-show 为 false 时，只是为元素添加一个优先级最高的 display:none;
ng-if 是否显示元素
ng-if 为 false 时，会将元素从DOM 树种移除
当元素需要反复显示隐藏时，使用 ng-show
当元素只显示一次后就不再使用时，使用ng-if
ng-click 单击事件
ng-mouseover...dom的标准事件的写法
ng-bind 将模型输出到页面，后引入脚本时可以解决{{ }}造成的原样输出问题
.box{width:100px;height:100px;background: red;}
.box1{border:1px solid}
.box2{border-radius: 5px;}
.box3{box-shadow: 2px 2px 5px black}
<body ng-init="isBox1=true;isBox2=true;isBox3=true;styleObject={};isShow=true;html='<h2>htmlString<h2>'">
<select name="" id="" ng-model="className">
<option value="true">box1</option>
<option value="false">box2</option>
</select>
<div class="box" ng-class="{true:'box1',false:'box2'}[className]"></div>
<div class="box" ng-class="{'box1':isBox1,'box2':isBox2,'box3':isBox3}"></div>
<div ng-style="{width:'100px',height:'100px',background:'green'}"></div>
<div ng-style="styleObject"></div>
<input type="checkbox" ng-model="isShow">显示/隐藏
<button ng-click="isShow = ! isShow"> 显示、隐藏 </button>
<div class="box" ng-show="isShow">1</div>
<!--<div class="box" ng-show="!isShow">2</div>-->
<div class="box" ng-if="isShow">2</div>
<h1 >{{ isShow }}</h1>
<h1 ng-bind="isShow"></h1>
{{html}}
<div ng-bind="html"></div>
<div ng-bind-html="html"></div>
</body>
3、Controller
angular.module( moduleName[,depends(可选参数)]) 创建或获取模块
moduleName ：模块名称
depends： 依赖的其它模块 Array
当只传入一个名称时，代表获取指定的模块
两个参数时，定义模块，即使不依赖其它模块，也要传入一个空的数组
<html lang="en" ng-app="myApp">
var app = angular.module("myApp",[]);
//推断式注入
app.controller("myController",function($scope){
$scope.name="sun";
});
//声明式注入（建议一律使用这种方式，代码压缩混淆后依然能正确运行）
//数组的 0 到 倒数第二项 是该控制器需要注入的模块
//最后一项是回掉函数
app.controller("myController2",["$scope",function(s){
s.name="tom";
}])
$rootScope根作用域 在声明 ng-app 的位置创建此作用域
一个 angular 应用有且只有一个根作用域
同级的作用域不可相互访问
<body ng-controller="mainController">
<div ng-controller="myController">
{{name}}---{{age}}--{{main}}--{{address}}
</div>
<div ng-controller="myController2">{{name}}--{{age}}--{{main}}--{{address}}</div>
<div ng-init="address='Beijing'">
{{address}}
</div>
{{name}}--{{main}}--{{address}}
</body>
var app = angular.module("myApp",[])
app.controller("myController",["$scope",function($scope){
$scope.name = "sun";
$scope.age = 30
}]);
app.controller("myController2",["$scope",function($scope){
$scope.name = "tom";
}]);
app.controller("mainController",["$scope",function($scope){
$scope.main = "Hello Angular"
}])
子级作用域可以访问使用父级作用域的值，但是无权修改
<body ng-controller="mainController">
<h1>父级</h1>
<input type="text" ng-model="pmsg">
<div ng-controller="myController">
<h1>子级</h1>
<input type="text" ng-model="pmsg">
这是父级的值：{{pmsg}}
<h1 ng-repeat="item in items">{{item.name+'--'+item.price}}</h1>
<button ng-click="clickEvent($event)">点击</button>
</div>
</body>
var app = angular.module("myapp",[]);
app.controller("myController",["$scope",function($scope){
$scope.cmsg = ""
$scope.items = [{
name:'iPhone',
price : 3000
},{
name:'蓝莓',
price : 4000
}];
$scope.clickEvent = function(e){
console.log("点击触发",e);
$scope.items.push({
name:"新手机",
price:9889
})
}
}]);
app.controller("mainController",["$scope",function($scope){
$scope.pmsg = ""
}])
内置过滤器
使用内置过滤器的方法是用 “管道符” “|” 链接
**currency ** 货币格式转换
currency ：“前缀” 更改指定的前缀，默认为$
lowercass | uppercase 大小写转换
date 日期格式转换
y 年 M 月 d 日 H 24时 h 12时 m 分钟 s 秒
数组过滤器：
limitTo 限制结果条数 如：limitTo:2 显示两条
orderBy 排序
orderBy:orderKey 按orderKey升序排列
orderBy:orderKey:true 按orderKey 降序排列
filter 按关键字快速过滤
filter:searchKey 过滤所有数据包含 searchKey 的内容
<h2 >{{ price }}</h2>
<h2 >{{ price | currency}}</h2>
<h2 >{{ price | currency:"￥"}}</h2>
<h2 >{{ price | currency:"星星"}}</h2>
<h2 >{{ str | lowercase}}</h2>
<h2 >{{ str | uppercase}}</h2>
<h2>{{date}}</h2>
<h2>{{date | date:"yyyy-MM-dd HH:mm:ss a"}}</h2>
<br>
<!--<h3 ng-repeat="item in items | limitTo:2">{{item.name}}</h3>-->
<!--<h3 ng-repeat="item in items | orderBy:'price':true">{{item.name}}--{{item.price}}</h3>-->
<select name="" id="" ng-model="orderKey">
<option value="name">按名称排序</option>
<option value="price">按价格排序</option>
</select>
<input type="checkbox" ng-model="isDown">升/降
<input type="text" ng-model="searchKey" 请输入关键字>
<h3 ng-repeat="item in items | orderBy:orderKey:isDown | filter:searchKey">{{item.name +'---'+ item.price}}</h3>
angular.module("myapp",[])
.controller("myController",["$scope",function($scope){
console.log($scope)
$scope.price = 4999,
$scope.str = "Hello Angular",
$scope.date = new Date(),
$scope.items = [{
name:"iPhone9"
,price : 9000
},{
name : "iPhone5"
,price:3000
},{
name:"小米"
,price:5000
},{
name:"蓝莓"
,price:6000
}]
}])
自定义过滤器
<select name="" id="" ng-model="orderKey">
<option value="name">按名称排序</option>
<option value="price">按价格排序</option>
</select>
<input type="checkbox" ng-model="isDown">升/降
<input type="text" ng-model="searchKey" placeholder="输入关键字">
<!--<h3 ng-repeat="item in items | orderBy:orderKey:isDown | filter:searchKey">{{item.name +'---'+ item.price}}</h3>-->
{{"str" | myFilter}} {{[2,3,4,5] | myFilter2}}
<h3 ng-repeat="item in items | myFilter3:searchKey">{{item.name}}--{{item.price}}</h3>
angular.module("myapp", [])
.filter("myFilter", function () {
return function (val) {
console.log(val);
// return val.toUpperCase();
return val == "str" ? "good" : "no"
}
})
.filter("myFilter2", function () {
return function (val) {
console.log(val);
var arr = val.map(Math.sqrt)
return arr;
}
})
.filter("myFilter3", function () {
return function (val,arg1) {
console.log(val);
console.log(arg1);
var arr=[];
val.forEach(function(item){
if(item.name.indexOf(arg1)!=-1){
arr.push(item)
}
})
return arr;
}
})
