AngularJS 입력 기본 사항

저자：Eve Cole 업데이트 시간：2025-06-14 16:00:03

모난

사용 된 모든 라이브러리, CDN은 사용했습니다.

코드 사본은 다음과 같습니다.

.Angular의 데이터 바인딩 인스턴스, 이것은 여기에서 가장 기본적인 분지 및 각도의 시작입니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

Angular의 가장 강력한 점은 데이터 결합 결합입니다.

</div>

<div>

<입력 유형 = "text"ng-model = "data" />

<cript>

app.controller ( "bf", function ($ scope) {

$ scope.data = "testData";

// $ scope. $ apply ();

});

</스크립트>

</div>

</body>

</html>

각도를 통해 배열의 해당 데이터를 표시합니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

각도를 통해 배열의 해당 데이터를 표시합니다.

</div>

<div>

<스타일>

.에스{

색상 :#F00;

}

Li {

커서 : 포인터;

}

</스타일>

<ul>

{{i.name}} ---- {{i.age}}

</li>

</ul>

<cript>

//angular.module("arr-app ", []);

기능 arrcon ($ scope) {

$ scope.flag = 0;

$ scope.bered = function (i) {

$ scope.flag = i;

};

$ scope.lists = [

{이름 : "Hehe",

나이 : 10},

{{

이름 : "xx",

나이 : 20

{{

이름 : "yy",

나이 : 2

{{

이름 : "jj",

나이 : 220

}

]]

};

</스크립트>

</div>

</body>

</html>

데이터 필터 데모 :

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

데이터 필터;

</div>

<br>

</div>

<cript>

함수 필터 ($ scope) {

$ scope.sourcode = "Hehe lala dudu oo zz";

};

app.filter ( "up", function () {

반환 기능 (ipt) {

반환 ipt.replace (/(/w)/g, function ($ 0, $ 1) {

반환 ""+$ 1.toupperCase ();

});

}

});

</스크립트>

</div>

</body>

</html>

Factory Factory, $ 제공 업체, 서비스 등은 모두 동일합니다. 어렵다고 생각하지 마십시오. 실제로 데이터 모델이나 인스턴스를 보는 것입니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

각도의 공장은 공통 인스턴스 방법과 동일하며, 이는 여러 컨트롤러가 사용할 수있는 함수로 이해 될 수 있습니다.

</div>

<cript>

app.factory ( "ff", function () {

반품 {

"언급": "JSON"

};

});

App.Controller ( "Factory", function ($ scope, ff) {

$ scope.json = ff;

});

</스크립트>

</div>

<div>

각도 지침;

</div>

<div>

<heh> 당신은 만족합니까? </heh>

<cript>

app.directive ( "heh", function () {

반품 {

제한 : "ae",

교체 : true,

TransClude : True,

템플릿 : '<div> <버튼 ng-transclude> </button> </div>'

};

})

</스크립트>

</div>

</body>

</html>

.ng-switch 지시문을 사용합니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

NG 스위치 사용

</div>

</ul>

</div>

<div>

<버튼 ng-click = "a = 1"> 테스트 </button>

<버튼 ng-click = "a = 2"> 테스트 </button>

<버튼 ng-click = "a = 3"> 테스트 </button>

</div>

App.Controller ( "SW", function ($ scope) {

});

</스크립트>

</div>

</body>

</html>

NG-SRC 및 NG-HREF;

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

NG-SRC 및 NG-HREF 사용 (SRC 또는 HREF를 사용하는 경우 HTML이 초기화 될 때로드되므로 불가능합니다).

</div>

</a>

</div>

app.controller ( "srccon", function ($ scope) {

$ scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

});

</스크립트>

</div>

</body>

</html>

페이지 스타일을 작동하는 방법, 바인딩 데이터 모델을 직접 변경하십시오.

코드 사본은 다음과 같습니다.

<div>

Angular는 스타일에서 작동합니다. (JQ는 요소 스타일에서 작동 할 요소를 수동으로 선택하는 것입니다. Angular는 요소의 속성을 변수에 할당하는 더 많은 방법을 제공하면이 변수를 변경하면됩니다).

</div>

<div>

hehe-- O (^^) o 와우;

</hehe>

</div>

app.directive ( "hehe", function () {

함수 compile () {

};

반품 {

링크 : 함수 ($ scope, $ element) {

var obj = angular.element ($ 요소);

//obj.find는 사용하기 쉽지 않습니다.

var add = obj [0] .getElementsByClassName ( "add") [0];

var reten = obj [0] .getElementsByClassName ( "reduce") [0];

Angular.element (add) .bind ( "click", function () {

$ scope.h = $ scope.h+10;

적용하다();

})

Angular.element (reting) .bind ( "클릭", function () {

$ scope.h = $ scope.h-10;

적용하다();

});

함수 apply () {

$ scope. $ apply ();

}

반환 컴파일;

컨트롤러 : 함수 ($ scope) {

$ scope.w = 200;

$ scope.h = 50;

// $ scope. $ apply ();

제한 : 'ae',

교체 : true,

범위 : "= ng 스타일",

TransClude : True,

템플릿 : '<div> <div ng-transclude> </div> <button>+</button> <button>-</button> </div>'

}

})

</스크립트>

</div>

각도에서 템플릿을 사용하는 방법은 무엇입니까? 라우터와 함께 사용해야합니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

템플릿 사용

</div>

<! ---이 유형은 정확하게 선언해야합니다->

</스크립트>

<! --- tpl은 변수가 아닌 고정 값이며 변수는 스코프로 정의되어야합니다 --->

<div>

</div>

app.controller ( "ngtpl", function ($ scope) {

기능 hehe (str) {

str = _.shuffle (str);

return str.join ( "")

};

$ scope.ver = "var-ver-heehe";

$ scope.chan = function () {

$ scope.ver = hehe ($ scope.ver);

};

});

</스크립트>

</div>

</body>

</html>

$ scope를 사용하는 방법. $ watch 바인딩 인터페이스의 템플릿을 실시간으로 변경하십시오.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

<Span> 업데이트 </span> 각도 알림 데이터 업데이트 3 가지 방법 $ scope. $ digest (), $ scope. $ apply () 및 $ scope를 통해 업데이트. $ watch listening;

</div>

<입력 유형 = "text"ng-model = "m0" />

<div>

$ scope에 의해 설정된 값. $ watch == >> {{wat}}

</div>

<br>

적용하다;

</버튼>

</div>

app.controller ( "적용", 함수 ($ scope) {

$ scope.hehe = "lll________xxx";

$ scope.m0 = 1;

ss = $ 범위;

$ scope.up = function () {

$ scope.hehe = $ scope.m0;

// 예, 프롬프트가 주어지면 오류가보고되었습니다. 누가 그 이유를 아십니까?

// $ scope. $ apply ();

$ scope. $ digest ();

};

// $ scope.m0 변수가 유효하지 않도록합니다.

$ scope. $ watch ( "m0", function (va) {

$ scope.wat = va;

})

});

</스크립트>

</div>

</body>

</html>

당신은 각도에서 자신을 정의하는 도구 방법입니다

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

Angular의 도구 방법 목록

</div>

<div>

<ul>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.bind </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.bootstrap </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.copy </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.element </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.equals </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.extend </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.foreach </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.fromjson </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> angular.identity </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.injector </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isarray </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isdate </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isdefined </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.iselement </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isfunction </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isnumber </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isobject </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isstring </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.isundefined </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.lowercase </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.Module </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.noop </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.reloadwithdebuginfo </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.tojson </a> </li>

<li 역할 = "프레젠테이션"> <a href = "###"> Angular.uppercase </a> </li>

</ul>

<div>

이러한 도구 및 방법은 다른 라이브러리와 유사합니다.

angular.element는 앵글 라이트 선택 요소의 작은 JQ입니다.

<br>

Angular.Module은 모듈 요소의 방법입니다.

</div>

</body>

</html>

NG-TransClude (공식적인 경우)의 사용은 코드가 다음과 같습니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

ng-transclude 사용 (이것은 공식적인 사례입니다) :

</div>

<div>

<입력 ng-model = "title"> <br>

</div>

app.directive ( 'Pane', function () {

반품 {

제한 : 'e',

TransClude : True,

범위 : {제목 : '@'},

템플릿 : '<div style = "테두리 : 1px solid black;">' +

'<div style = "back

'<ng-transclude> </ng-transclude>' +

'</div>'

};

})

.controller ( 'emailplecontroller', [ '$ scope', function ($ scope) {

$ scope.title = 'Lorem ipsum';

$ scope.text = 'Nequ Porno Quisquam est Qui dolorem ipsum Quia dolor ...';

}]);

</스크립트>

</div>

</body>

</html>

다음은 사서함의 정확도를 확인하는 예입니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

NGPASTE, NGMOUSEUP, NGKEYUP, NGMODELOPTIONS 등은 공식적인 사용을 참조하고 확인 API를 사용하십시오 (공식 요구 사항 FQ;).

</div>

ng-message 구성 요소를 사용하지 않으면 오류 프롬프트는 다음과 같습니다.

<div>

<label for = "emailAddress"> 이메일 주소를 입력하십시오 : </label>

<입력 유형 = "이메일"이름 = "emailAdDress"ng-model = "data.email"필수 />

<!-이 물건은 너무 복잡합니다->

이메일 주소를 입력하는 것을 잊었습니다 ...

</div>

<div ng-if = "! userform.emailAddress. $ error.required &&

userform.emailaddress. $ error.email ">

이메일 주소를 올바르게 입력하지 않았습니다 ...

</div>

<입력 유형 = "제출" />

</form>

<br>

</div>

app.controller ( "fromvaild", function ($ scope) {

//$scope.myfield.$error = {minlength : true, 필수};

})

</스크립트>

</div>

</body>

</html>

settimeout과 setinterval은 모두 각도로 싸여 있으며 지연된 객체의 인스턴스를 반환합니다.

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> Angular </title>

</head>

var app = angular.module ( "app", []);

</스크립트>

<div>

$ 타임 아웃 및 $ 간격,이 두 서비스;

</div>

<div>

<H4> setInterVal </h4>

<p>

$ 간격 (fn, delay, count], [invokeApply]);

</p>

</a>

<p>

$ timeout (fn, [delay], [invokeApply]);

</p>

</a>

</div>

<div>

</div>

시작

</버튼>

</div>

app.controller ( "st", function ($ scope, $ element, $ interval) {

var $ el = $ ($ element [0]). 찾기 ( ". Progress-Bar");

Console.log (인수);

// angular.element에서 선택한 요소를 사용하여 찾지 않고 무언가를 찾으십시오.

$ scope.prog = function () {

var df = $ interval (function () {

var val = parseint ($ el.html ())+4;

if (val> = 104) $ interval.cancel (df);

$ el.html (val+"%") .Width (val+"%");

}, 100);

Console.log (DF)

//console.log(aa = $ 간격)

};

});

</스크립트>

</div>

</body>

</html>