标签：view .config oat 1.7 应用 确认密码 属性 生成 区分
前 言
AngularJS 通过新的属性和表达式扩展了 HTML。
使用起来非常方便。
| 1. AngularJS的指令与表达式 |
| 2. AngularJS中的MVC与作用域 |
Model(模型层)：应用程序中用于处理数据的部分。(包括将数据保存或修改到数据库、变量、文件中)
| 3. AngularJS中的过滤器 |
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.classes=[
{name:"张三",age:12,score:78},
{name:"李四",age:12,score:66},
{name:"二麻子",age:12,score:98},
{name:"小刘",age:12,score:54},
{name:"八万",age:12,score:75},
]
})
/*
* 自定义过滤器
*/
.filter("showHello",function(){
return function(text){
return "Hello AngularJS";
}
})
.filter("reverse",function(){
return function(text){
return text.split("").reverse().join("");
}
})
/*
* 自定义过滤器，同时需要传递过滤参数
* 调用过滤器示例：<p>{{12345678901| hideTel:4}}</p>
* 传入的参数4，将被过滤函数的num形参所接受
*/
.filter("hideTel",function(){
return function(text,num){
num=num>0&&num<11?num:3;
text=text+"";
var newText=text.substring(0,11-num)
+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})
/*
* 自定义过滤器，实现根据姓名筛选数据的功能。
* >>> 调用示例：
* 请输入姓名：<input type="text" ng-model="name"/>
* <tr ng-repeat="item in classes | filterByName:name">
*/
.filter("filterByName",function(){
return function(items,search){
if(!search) return items;
var arr=[];
for (var i=0;i<items.length;i++) {
var index=items[i].name.indexOf(search);
if (index>-1) {
arr.push(items[i]);
}
}
return arr;
}
})
| 4. AngularJS中的service & factory & provider |
4.1.1 内置服务：
angular.module("app",[])
.controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){
$scope.local = $location.$$host;
$timeout(function(){
$scope.time="我是两秒钟之后出现！";
},2000);
$scope.num=0;
$interval(function(){
$scope.num++;
},1000);
$scope.gongneng=hexafy.gongneng;
$scope.num1=hexafy.func(10);
})
.service("hexafy",function(){
this.gongneng="将十进制数转化为16进制";
this.func=function(num){
return num.toString(16);
}
})
/*使用过滤器实现同样功能*/
.filter("filter1",function(){
return function(num){
return num.toString(16);
}
})
/* 在过滤器中调用服务!!
* 也必须在声明过滤器的外层构造函数中，注入服务名称！！
*/
.filter("filter2",function(hexafy,$location){
return function(num){
return hexafy.func(num);
}
})
angular.module("app",[])
.controller("ctrl",function($scope,hexafy){
$scope.gongneng=hexafy.gongneng;
$scope.num1=hexafy.func(11);
})
.factory("hexafy",function(){
var obj={
gongneng:"将十进制数转化为16进制",
func:function(num){
return num.toString(16);
}
}
return obj;
})
.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng:"333"
}
return obj;
}
})
angular.module("app",[])
/*.config()表示配置阶段，在声明controller之前执行。可以用于声明一些在controller中
* 需要使用的全局变量、方法、服务等
*/
.config(function($provide){
// 在配置阶段声明provider服务，需要在config中注入系统对象$provide
$provide.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng:"444"
}
return obj;
}
});
})
.controller("ctrl",function($scope,hexafy){
$scope.gongneng=hexafy.gongneng;
})
| 5. AngularJS中的select和表格 |
<select ng-model="site2" ng-options="item.site for item in sites"></select> <!-- 这种写法，默认生成的option效果如下： <option value="http://www.google.com">Google</option> -->
<select ng-model="site3" ng-options="key for (key,value) in sitess"> <!-- <option value="value">key/value(取决for前面的内容)</option> --> </select>
<tr ng-repeat="item in options"> <!-- ng-repeat遍历是，$index 表示当前的行索引！ --> <td>{{$index + 1}}</td> <td>{{item}}</td> </tr>
| 6. AngularJS中的表单和输入验证 |
<div class="container" style="width: 500px;margin: 50px auto;padding: 0px;"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title text-center"> 用户注册 </div> </div> <div class="panel-body"> <form class="form-horizontal" name="form" novalidate> <div class="row"> <div class="col-xs-3">用户名</div> <div class="col-xs-9"> <input type="text"class="form-control"name="name" ng-model="user.name" ng-minlength="6" ng-maxlength="12"/> <p style="margin: 0px; color: red;" ng-show="form.name.$invalid && form.name.$dirty"> <span ng-show="form.name.$error.required">用户名必须填写</span> <span ng-show="form.name.$error.minlength">用户名长度最小为6位</span> <span ng-show="form.name.$error.maxlength">用户名长度最大为16位</span> </p> </div> </div> <div class="row"> <div class="col-xs-3">邮箱：</div> <div class="col-xs-9"> <input type="email" class="form-control" name="email" ng-model="user.email" required/> <p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty"> <span ng-show="form.email.$error.required">邮箱必须填写</span> <span ng-show="form.email.$error.email">邮箱不合法</span> </p> </div> </div> <div class="row"> <div class="col-xs-3" >密码：</div> <div class="col-xs-9"> <input type="password"class="form-control"name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$" required/> <p style="margin: 0px; color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty"> <span ng-show="form.pwd.$error.pattern">密码只能由6-18位的字母、数字、下划线</span> </p> </div> </div> <div class="row"> <div class="col-xs-3" >确认密码：</div> <div class="col-xs-9"> <input type="password"class="form-control" name="repwd" ng-model="user.repwd" required/> <p style="margin: 0px; color: red;" ng-show="user.pwd!=user.repwd && form.repwd.$dirty"> 两次密码输入不一致 </p> </div> </div> <div class="row"> <div class="col-xs-5"> <input type="submit" value="注册" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd"/> </div> <div class="col-xs-5"> <input type="reset" value="重置" class="btn btn-warning"/> </div> </div> </form> </div> </div> </div>
标签：view .config oat 1.7 应用 确认密码 属性 生成 区分
原文地址：http://www.cnblogs.com/sin0/p/7588714.html
