사람들이 내려놓을 수 없는 AngularJS의 8가지 기능_AngularJS

놓칠 수 없는 AngularJS의 8가지 기능을 참고하시라고 공유합니다.

첫 번째 반복 출력 ng-repeat 태그

ng-repeat는 table ul ol 및 기타 태그를 js의 배열과 완벽하게 결합합니다

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

출력 순서를 지정할 수도 있습니다.

<li ng-repeat="person in persons | orderBy:'name'">

두 번째 ng-model 태그의 동적 바인딩

사용자 입력과 값이 포함된 모든 html 태그는 js의 변수에 동적으로 바인딩될 수 있습니다.
그리고 그것은 동적 바인딩입니다.

<input type="text" ng-model='password'>

바운드 변수의 경우 {{}}를 사용하여 직접 참조할 수 있습니다.

<span>you input password is {{password}}</span>

fiter에 익숙하다면 원하는 형식으로 쉽게 출력할 수 있습니다

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

세 번째 클릭 이벤트를 ng-click 이벤트에 바인딩

ng-click을 사용하면 클릭 이벤트를 라벨에 쉽게 바인딩할 수 있습니다.

<button ng-click="pressMe()"/>

물론, $scope 도메인에 자체 pressMe 메소드를 정의해야 한다는 전제가 있습니다.

기존의 onclick 방법과 달리 다음과 같이 ng-click 방법에 객체를 전달할 수도 있습니다.

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

물론 ng-dblclick 태그도 있습니다

네번째 분기문 ng-switch on, ng-if/ng-show/ng-hide/ng-disabled 태그

Branch 문을 사용하면 인터페이스에 대한 논리적 판단을 작성할 수 있습니다.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

다섯 번째 검증 구문 ng-trim ng-minlength ng-maxlength 필수 ng-pattern 및 기타 태그

양식의 입력 상자에 대해서는 위의 태그를 사용하여 사용자 입력을 확인할 수 있습니다.
당신은 이미 그것이 문자 그대로 무엇을 의미하는지 알고 있습니다.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

$scope.yourForm.inputText.$error.required를 사용하여 입력 상자가 비어 있는지 확인할 수 있습니다
$scope.yourForm.inputText.$invalid를 사용하여 입력 콘텐츠가 ng-pattern, ng-maxlength, maxlength
를 충족하는지 확인할 수 있습니다. $scope.userNum을 통해 얻은 입력 콘텐츠에는 ng-trim이 있기 때문에 앞뒤 공백이 제거되었습니다.

여섯 번째 드롭다운 상자의 ng-options 태그

ng-options는 드롭다운 상자용으로 특별히 만들어진 태그입니다.

코드 복사 코드는 다음과 같습니다.

f46249bb92649278d3dfd016a545389e18bb6ffaf0152bbe49cd8a3620346341

드롭다운 상자에 표시되는 것은 person.name 중 하나를 선택하면 yourSelected를 통해 선택한 person.id를 얻을 수 있습니다.

일곱 번째 Css ng 스타일 태그 제어

ng 스타일을 사용하면 CSS 속성을 쉽게 제어할 수 있습니다

<span ng-style="myColor">your color</span>

다음과 같이 myColor에 값을 할당하여 원하는 효과를 변경할 수 있습니다.

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

여덟번째 비동기 요청 $http 객체

AngularJS는 비동기 요청을 위해 jquery의 $.ajax와 유사한 객체를 제공합니다.
비동기 작업은 AngularJS에서 매우 중요하므로 $http 작업은 비동기 매개변수도 제공하는 jquery.ajax와 달리 모두 비동기입니다.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

POST 요청을 하는 경우 params의 데이터는 URL 끝에 배치되고 data의 데이터는 요청 본문에 배치됩니다.

이 글을 읽고도 도저히 내려놓을 수 없다면, 여러분의 프로젝트에 적용해 보세요!