一些重要的 demo
dropList
代码语言：javascript复制 <div ng-app="myApp" ng-controller="myCtrl" >
<select ng-model="adStyle" ng-change="look();" >
<option value="0">全部广告类型option>
<option value="1">图片广告option>
<option value="2">图音视广告option>
select>
<br>
<select name="" id="" >
<option value="" ng-repeat="x in repeat">{{ x }}option>
select>
<br>
<select ng-model="formModel" ng-options="x for x in form1">
<option>{{ x }}option>
select>
<br>
<select ng-model="formData.channelId" ng-options="item.channelId as item.shortName for item in channelList">
<option value="">全部渠道option>
select>
你选择的渠道对应的ID是:{{formData.channelId}}
div>
<script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'>script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.channelList=[
{"channelId":1,"shortName":"张三"},
{"channelId":2,"shortName":"李四"}
]
$scope.formModel = '03';
$scope.form1 = ['01','02','03'];
$scope.form = formData = [
{name : "张三", content : "我有病"},
{name : "李四", content : "我有药"},
{name : "王二", content : "我啥也没有"}
];
$scope.repeat = ['1','2','3'];
$scope.adStyle = "0";
$scope.look = function(){
alert($scope.adStyle)
}
});
script>
复制代码filter 自建
代码语言：javascript复制// 我以一个将字符串折分成数组的过滤器举例。在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :） 和参数的格式添加。总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。
var app = angular.module('myApp', []);
//控制器
app.controller('myCtrl', function($scope, $filter) {
$scope.data ="abc,mn,大山,绿水";
$scope.data2 ="abc;mn;大山;绿水";//需要给定分割器
});
app.filter('toArray',function(){
return function(data,separator){
if(data){
// separator ? separator = separator :separator = ',';
separator = separator || ',';
console.log(separator);
return data.split(separator);
}else{
return [];
}
}
})
//在过滤器注入服务
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
//过滤器
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
//将字符串分割成数组
// app.filter("toArray",function(){
// return function(data,separator){
// if(data){
// if(!separator) {
// separator = ",";//默认逗号分割
// }
// return data.split(separator);
// }else{
// return [];//得到的结果类型始终为数组类型 }
// }
// }
// });
script>
checkForm 表单验证
代码语言：javascript复制<div ng-app="myApp" ng-controller="myCtrl">
名字：<input ng-model="name">
<span ng-if="checkData.nameCheck=='m'">不能为空span>
<span ng-if="checkData.nameCheck=='e'">最少两个字span><br/>
电话：<input ng-model="phone">
<span ng-if="checkData.phoneCheck=='m'">手机号span>
<span ng-if="checkData.phoneCheck=='e'">格式错误span><br/>
<button ng-click="submit()">提交button>
div>
<script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'>script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//存校验数据滴,给定默认值
$scope.checkData ={
"nameCheck":"m",
"phoneCheck":"m"
};
//提交时校验数据:二选一
$scope.submit = function(){
//1.这种会一个一个校验的
if($scope.checkName() && $scope.checkPhone()){
alert("数据都符合，可以与后台交互数据了")
}
//2.这种会一起校验完的
var nameFlag = $scope.checkName();
var phoneFlag = $scope.checkPhone();
if(nameFlag && phoneFlag){
alert("数据都符合，可以与后台交互数据了")
}
};
//注：如果校验的内容大同小异，可合并成一个校验的方法，我就不写了。
//校验名字
$scope.checkName = function(){
if($scope.name){
if($scope.name.length<2){
$scope.checkData.nameCheck = "e";
return false;
}else{
//...进行某些正确的操作，如显示正确图片
$scope.checkData.nameCheck = "r";
return true;
}
}else{
$scope.checkData.nameCheck = "m";
return false;
}
};
//校验电话
$scope.checkPhone = function(){
var phone = $scope.phone;
if(phone){
var reg = /^1(3|4|5|6|7|8)d{9}$/;//手机号正则
if(reg.test(phone)){
$scope.checkData.phoneCheck = "r";//正确
}else{
$scope.checkData.phoneCheck = "e";//格式错误
}
}else{
$scope.checkData.phoneCheck = "m";
return true;//可以为空
}
};
});
script>
复制代码checkbox 多选
代码语言：javascript复制<div ng-app="myApp" ng-controller="myCtrl">
选择
<div ng-repeat="item in list">
<input type="checkbox" name="tagName" value="item.id" ng-click="select(item.id,$event)"> {{item.shortName}}
div>
结果：{{result}}
div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
//创建checkbox用的
$scope.list=[{"id":1,"shortName":"张三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}];
//存储已选
$scope.result = [];
//触发事件
$scope.select = function(id,event){
console.log(event)//打印看看这是什么，有利于理解
console.log(action)
var action = event.target;
if(action.checked){//选中，就添加
if($scope.result.indexOf(id) == -1){//不存在就添加
$scope.result.push(id);
}
}else{//去除就删除result里
var idx = $scope.result.indexOf(id);
if( idx != -1){//不存在就添加
$scope.result.splice(idx,1);
}
}
};
});
script>
复制代码inputFocus and blur 使用
代码语言：javascript复制 <div ng-app="myApp" ng-controller="control">
<input type="text" set-Focus ng-blur="setBlur()">
<button ng-click="getFocus()">要取 focusbutton>
div>
<script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'>script>
<script type="text/javascript">
//模型
var app = angular.module('myApp',[]);
app.controller('control',function($scope){
$scope.isCome = false; //判断是否电击
$scope.isFocus = false; //判断是否 focus
$scope.getFocus = function(){
$scope.isCome = true;
$scope.isFocus = true;
}
$scope.setBlur = function(){
$scope.isFocus = false;
}
})
app.directive('setFocus',[function(){
return {
//为了隔离父级 隔离 scope 设为 false
scope: false,
//link函数主要用于操作dom元素,给dom元素绑定事件和监听.
link:function(scope,element,attr,ctrl,linker){
//scope:指令所在的作用域
//element：指令元素的封装，可以调用angular封装的简装jq方法和属性
//attr：指令元素的属性的集合
//ctrl：用于调用其他指令的方法,指令之间的互相通信使用，需要配合require
//linker:用于transClude里面嵌入的内容
scope.$watch('isFocus',function(newValue,oldValue,scope){
// $watch(F,M,B)
// F 为监听的数据 'isFocus'
// M 当数据发生变化的时候，调用 M
// M 新数据 和 老数据 和 作用域
// B 为true时：将会检查监听对象的每个属性是否发生变化。适用于监听数组或者监听的是一个对象上的所有属性。由于每次都要遍历监听对象的值是否发生变化，如果数组值过多，或对象属性多，那么一点点改变就会造成大量的遍历。
if(newValue && scope.isCome){
element[0].focus();
// 获取焦点
alert("获取焦点");
}
},true);
}
}
}])
//控制器
// app.controller("control",function($scope){
// $scope.isCome = false; //判断大圣来了没
// $scope.isFocus = false; //判断是不是要取芭蕉扇
// $scope.getFocus = function(){
// $scope.isFocus = true; //大圣来了
// $scope.isCome = true; //要取芭蕉扇
// };
// $scope.setBlur = function(){
// $scope.isFocus = false;//没人要来取芭蕉扇了
// }
// });
// //自定义指令
// app.directive('setFocus',[ function(){
// return {
// scope:false,
// link:function(scope, element){
// scope.$watch("isFocus",function(newValue,oldValue, scope) {
// //大圣来了，且要取芭蕉扇
// if(newValue && scope.isCome){
// element[0].focus(); //获取焦点
// alert("猴哥，老牛不在家，我一介女子还不是你说什么我就照做，可你进入人家的身体也不打声招呼，进了就进了，还搞得我那么难受，求你别搞了，给，芭~~~蕉~~~扇！")
// }
// }, true);;
// }
// };
// }]);
script>
复制代码
