angular의 데모.
이것은 작은 필터입니다. 평상시에도 사용할 수 없습니다. 필터의 코드입니다.
app.filter("inflector", function() {
var reg = new RegExp("","gi");
return function(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;
};
return value;
};
});아래의 모든 코드는 버튼을 클릭하여 온라인으로 실행할 수 있습니다.
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js">script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">script>
head>
<body ng-controller="test0Controller">
<label>
<input type="radio" value="humanize" ng-model="inflectorType"> Humanize (Default)label>
<label>
<input type="radio" value="underscore" ng-model="inflectorType"> Underscorelabel>
<label>
<input type="radio" value="variable" ng-model="inflectorType"> Variablelabel>
<input placeholder="Enter some text to inflect" ng-model="inflectorText">
<p>{{inflectorText|inflector:inflectorType}}p>
<script>
// ;
var app = angular.module('app', []);
app.controller("test0Controller",function($scope){
$scope.inflectorText = "normal test_hehe-nice";
$scope.inflectorType = "humanize";
});
app.filter("inflector", function() {
var reg = new RegExp("","gi");
return function(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;
};
return value;
};
});
script>
body>
html>이 실례는 주로 사용자 정의 지령을 통해 이벤트를 귀속시키는 것을 표현하고자 한다. angular 정부에서 제공한 지령도 이와 같다.
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js">script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">script>
head>
<body>
<div ng-controller="kepressController">
<textarea ui-keypress="keypressCallback">
textarea>
div>
<script>
// ;
var app = 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) {
return function(scope, $elem , $attrs ) {
$($elem).bind("keypress", function(ev) {
if( +ev.charCode === 13 ) {
scope.keypress()(ev);
};
});
}
}
}
});
script>
body>
html>이것은 또 하나의 필터의 예로, 클립을 통해 정렬 함수를 직접 만든다. 간단하고 거칠다.
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js">script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">script>
head>
<body>
<div ng-controller="test0Controller">
<select ng-model="sortType">
<option value="firstName">firstNameoption>
<option value="id">idoption>
<option value="gender">genderoption>
select>
<div>
{{items | sort : sortType | json}}
div>
div>
<script>
// ;
var app = angular.module('app', []);
app.controller("test0Controller",function($scope){
$scope.inflectorText = "normal test_hehe-nice";
$scope.inflectorType = "humanize";
$scope.items = [
{ firstName: 'Dean', lastName: 'Sofer',
id: 1, gender: 'Male' },
{ firstName: 'Dean', lastName: 'Kuntz',
id: 2, gender: 'Male' },
{ firstName: 'Peter', lastName: 'Piper',
id: 3, gender: 'Female' },
{ firstName: 'Peter', lastName: 'Darwin',
id: 4, gender: 'Male' },
{ firstName: 'Janet', lastName: 'Piper',
id: 5, gender: 'Female' },
{ firstName: 'Dan', lastName: 'Doyon',
id: 6, gender: 'Male' },
{ firstName: 'Andy', lastName: 'Joslin',
id: 1, gender: 'Male' },
];
});
// ;
app.filter("sort",function() {
var sortClosure = function( name ){
return function(a,b) {
if( a[name] < b[name] ){
return -1;
}else{
return 1;
}
}
};
return function(value, type) {
var sortFn = sortClosure(type);
//return value.sort(sortFn);
return angular.copy(value).sort(sortFn);
};
});
script>
body>
html>총괄:angular 입문은 간단하지만 승급은 어렵지
전재 대상:https://www.cnblogs.com/diligenceday/p/4182033.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
