Angular.JS 에서 명령 하 는 ng-if,ng-show/ng-hide 와 ng-switch 의 사용 강좌

머리말
최근 에 프로젝트 개편 을 하고 있 는데 처음으로 프로젝트 에서 Angular 를 사용 하 게 되 었 습 니 다.평소에 자신 이 작은 demo 를 쓰 는 것 과 연습 을 하 는 느낌 이 매우 다 르 고 신선 한 느낌 을 받 았 습 니 다.몇 가지 지령 이 자주 사용 되 는데,여 기 는 이 몇 가지 공통점 이 있 기 때문에 ng-if,ng-show/ng-hide,ng-switch 라 는 몇 가지 지령 을 소개 합 니 다.다음은 상세 한 소 개 를 살 펴 보 겠 습 니 다.
공통성
       1.이 명령 은 모두 Angular 프레임 워 크 가 우리 에 게 제공 하 는 설정 페이지 내용 표시 와 숨 기 는 방법 으로 사용 하기에 매우 편리 하 며 특히 업무 논 리 를 한다.
       2.모두 표현 식 의 값 을 통 해 전환 을 실현 합 니 다.단지 ng-switch 는 다른 값 일 수 있 습 니 다.ng-if ng-show 는 boolen 이 어야 합 니 다.
       3.저 는 사용 하 는 과정 에서 작은 기 교 를 발 견 했 습 니 다.우 리 는 표현 식 을 통 해 ng-if 또는 ng-show 를 설정 하여 페이지 에서 표현 식 을 직접 정의 합 니 다.이때 그 값 은 undefined 입 니 다.왜냐하면!==트 루.그래서 이 부분 은 기본적으로 숨겨 져 있 습 니 다.
그렇다면 서로 다른 지령 이 니 각자 전공 이 있다 면 그들 이 각각 어떤 열매 능력 을 가지 고 있 는 지 살 펴 보 자.해적 을 보지 않 으 면 무시 해도 되 지~)
ng-show/ng-hide
원생 js 나 jquery 를 사용 할 때 우 리 는 보통 하나의 종 류 를 정의 할 수 있 습 니 다.이 종 류 를 추가 하고 삭제 함으로써 요소 의 표시 와 숨 김 전환 을 실현 합 니 다.사실 이 부분 은 인터넷 참고 자 료 를 보면 Angular 도 이렇게 이 루어 집 니 다.표현 식 의 정확 여부 에 따라 ng-haide 라 는 Angualr 가 미리 정 의 된 class 를 동적 으로 추가 하거나 삭제 합 니 다.호출 방식 은 구체 적 으로 다음 과 같다.
변 수 를 설정 할 수 있 습 니 다.

<div ng-show='show'></div>

트 루/false 를 직접 사용 할 수도 있 습 니 다.

<div ng-show='true'></div>

변수 에 대해 서 는 js 에서 이 값 을 직접 설정 하면 됩 니 다.
이 명령 의 특성 은 우리 가 이 부분 을 잠시 숨 겨 도 dom 에 의 해 렌 더 링 된다 는 것 이다.
ng-if
사용 방식 도 표현 식 을 설정 합 니 다:
변 수 를 설정 할 수 있 습 니 다.

<div ng-if='more'></div>

트 루/false 를 직접 사용 할 수도 있 습 니 다.

<div ng-if='true'></div>

변수 에 대해 서 는 js 에서 이 값 을 직접 설정 하면 됩 니 다.
이것 은 우리 가 효율 을 절약 할 수 있 도록 도와 주 는 명령 입 니 다.만약 표현 식 값==false 라면 이 부분 은 dom 에서 과장 되 지 않 거나 원래 의 내용 이 dom 에서 삭 제 됩 니 다.따라서 일부 내용 이 있 으 면 처음부터 표시 할 필요 가 없습니다.우 리 는 먼저 ng-if 로 숨 길 수 있 습 니 다.예 를 들 어 더 많은 드 롭 다운 단 추 를 표시 합 니 다.처음에 표시 되 지 않 았 던 부분 은 ng-if 로 설정 할 수 있 습 니 다.더 많은 단 추 를 누 르 면 ng-if=true 를 설정 할 수 있 습 니 다.이렇게 하면 페이지 렌 더 링 사건 을 줄 이 고 효율 을 높 일 수 있 습 니 다.
ng-if 또는 자신의 scope 를 만 드 는 기능 도 있 습 니 다.원형 을 통 해 부모 급 scope 를 계승 합 니 다.하나의 전형 적 인 예 는 참고 자원 1 에서 나온다.
작은 구덩이 가 하나 더 있 습 니 다.$scope 위 에 속성 값 을 직접 부여 할 수 있 습 니 다.예 를 들 어:

$scope.showpage = 'abut'

그러나 대상 을 직접 할당 할 수 없다 면 먼저 설명 하고 대상 에 속성 을 추가 해 야 합 니 다.

$scope.data = {};
$scope.data.showpage = 'about';

ng-swith
사용 방식 은 앞의 두 가지 보다 복잡 하지만 매우 직관 적 이 며 원생 js 중의 switch 함수 와 유사 합 니 다.
외부 부모 급 요소 에 ng-switch 를 표현 식 A 로 설정 하면 그의 하위 요 소 는 몇 가지 다른 옵션 에 해당 합 니 다.표현 식 A 는 어떤 하위 요소 에 대응 하 는 ng-switch-with 값 을 표시 합 니 다.

<div ng-switch='showpart'>
 <div ng-switch-default></div>
 <div ng-switch-with='home'></div>
 <div ng-switch-with='blog'></div>
 <div ng-switch-with='about'></div>
 <div ng-switch-with='contact'></div>
</div>

이것 도 우리 가 효율 을 절약 하 는 것 을 도 울 수 있 는 지령 이다.ng-if 와 마찬가지 로 처음에는 부모 급 의 ng-switch 표현 식 값 과 같 지 않 으 면 페이지 에 나타 나 지 않 습 니 다.또한 ng-switch-default 를 통 해 기본 디 스 플레이 부분 을 설정 할 수 있 습 니 다.예 를 들 어 예전 에 흔히 볼 수 있 었 던 Tab 옵션 카드 는 이 명령 으로 실현 하기 가 매우 쉬 웠 다.
여기 서 의문 이 있 습 니 다.제 가 프로젝트 에서 만 든 단일 페이지 응용 은 모든 다른 부분 이 한 페이지 에 있 기 때 문 입 니 다.그러면 저 는 항상 서로 다른 ajax 반환 값 에 따라 다른 부분 을 표시 해 야 합 니 다.필요 에 따라 표시 할 수도 있 지만,ng-switch 를 이렇게 사용 하 는 것 은 적절 하지 않다 는 글 을 보 았 습 니 다.지나 가 는 친구,아 는 것 이 있 으 면 가르쳐 주세요!저 는 여기 서 먼저 감 사 드 립 니 다.
나중에 저 는 Angular 가 프로젝트 개발 에서 의 경험 과 만 나 는 구 덩이 를 계속 공유 하 겠 습 니 다!
총결산
이상 은 이 글 의 모든 내용 입 니 다.본 논문 의 내용 이 여러분 에 게 Angular.js 를 배우 거나 사용 하 는 데 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.