angular的DEMO(用来练习和顺便看看)

发布时间：2020-12-17 09:25:02 所属栏目：安全来源：网络整理

导读：inflector(辅助) 将用户输入的字符串转化成驼峰或者空格或者底线的小插件; 这个是一个小的过滤器,平常也是用不到的,合格是过滤器的代码: 运行下面代码 650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="复制代码" style

inflector(辅助)将用户输入的字符串转化成驼峰或者空格或者底线的小插件;

　　这个是一个小的过滤器,平常也是用不到的,合格是过滤器的代码:

运行下面代码

app.filter("inflector",function(){varreg=newRegExp("","gi");returnfunction(value,type){switch(type){case"underscore":
value=value.replace(/[s-_]/gi,"_");break;case"variable":
value=value.replace(/[s-_](w)/gi,function($0,$1){return$1.toUpperCase();
});break;default:
value=value.replace(/[s-_]/gi,"");break;
};returnvalue;
};
});

　　下面的全部的代码，点击按钮即可在线运行：

<htmlng-app="app">
<head>
<metacharset="utf-8"/>
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head><bodyng-controller="test0Controller">
<label>
<inputtype="radio"value="humanize"ng-model="inflectorType">Humanize(Default)</label>
<label>
<inputtype="radio"value="underscore"ng-model="inflectorType">Underscore</label>
<label>
<inputtype="radio"value="variable"ng-model="inflectorType">Variable</label>

<inputplaceholder="Entersometexttoinflect"ng-model="inflectorText">
<p>{{inflectorText|inflector:inflectorType}}</p>

<script>
//初始化用户模块;
varapp=angular.module('app',[]);
app.controller("test0Controller",function($scope){
$scope.inflectorText="normaltest_hehe-nice";
$scope.inflectorType="humanize";
});
app.filter("inflector","");break;
};returnvalue;
};
});</script></body></html>

　　这一个实例主要想表达的是通过自定义的指令绑定事件,angular官方提供的指令也是这样子的：

<htmlng-app="app">
<head>
<metacharset="utf-8"/>
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head><body>
<divng-controller="kepressController">
<textareaui-keypress="keypressCallback">
</textarea>
</div>
<script>
//初始化用户模块;
varapp=angular.module('app',[]);
app.controller("kepressController",function($scope){
$scope.keypressCallback=function(e){
e.target.value+="enter";
console.log(e)
alert("输入enter");
e.preventDefault();
};
});

app.directive("uiKeypress",function($parse){return{
scope:{
keypress:"&uiKeypress"
},compile:function(elem,attrs){returnfunction(scope,$elem,$attrs){
$($elem).bind("keypress",function(ev){if(+ev.charCode===13){
scope.keypress()(ev);
};
});
}
}
}
});</script></body></html>

　　这个又是一个过滤器的例子，直接通过一个闭包创建一个排序的函数，简单粗暴：

<htmlng-app="app">
<head>
<metacharset="utf-8"/>
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head><body>
<divng-controller="test0Controller">
<selectng-model="sortType">
<optionvalue="firstName">firstName</option>
<optionvalue="id">id</option>
<optionvalue="gender">gender</option>
</select>
<div>
{{items|sort:sortType|json}}</div>
</div>
<script>
//初始化用户模块;
varapp=angular.module('app',function($scope){
$scope.inflectorText="normaltest_hehe-nice";
$scope.inflectorType="humanize";
$scope.items=[
{firstName:'Dean',lastName:'Sofer',id:1,gender:'Male'},{firstName:'Dean',lastName:'Kuntz',id:2,{firstName:'Peter',lastName:'Piper',id:3,gender:'Female'},lastName:'Darwin',id:4,{firstName:'Janet',id:5,{firstName:'Dan',lastName:'Doyon',id:6,{firstName:'Andy',lastName:'Joslin',];
});//排序的指令;app.filter("sort",function(){varsortClosure=function(name){returnfunction(a,b){if(a[name]<b[name]){return-1;
}else{return1;
}
}
};returnfunction(value,type){varsortFn=sortClosure(type);//returnvalue.sort(sortFn);
returnangular.copy(value).sort(sortFn);
};
});</script></body></html>

　　　总结：angular入门很简单的，但是提升比较难吧

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!