AngularJS_AngularJS에서 ngShow 및 ngHide를 사용하는 방법에 대한 자세한 설명

오늘은 Angular의 ​​ngShow 및 ngHide 지시어를 사용하여 수행되어야 할 것처럼 보이는 작업을 표시하고 숨기는 방법을 살펴보겠습니다!
해야 할 일

ngShow와 ngHide를 사용하면 다양한 요소를 표시하거나 숨길 수 있습니다. 단일 페이지 애플리케이션에는 애플리케이션 상태가 변경됨에 따라 왔다 갔다 하는 움직이는 부분이 많기 때문에 이는 Angular 애플리케이션을 만들 때 도움이 됩니다.

이러한 지시문의 가장 큰 장점은 지시문을 표시하거나 숨기기 위해 CSS나 JS를 사용할 필요가 없다는 것입니다. 이 모든 작업은 숙련된 Angular에 의해 수행됩니다.

사용방법

ngShow 또는 ngHide를 사용하려면 표시하거나 숨기려는 요소에 지시문을 추가하기만 하면 됩니다.

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>  
 
 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>  
 
<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 
 
<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

마크업을 설정한 후에는 다양한 방법으로 안녕하세요 또는 작별 인사를 설정할 수 있습니다. Angular 컨트롤러에서 이를 설정하고 앱이 로드될 때 div를 표시하거나 숨길 수 있습니다.

위 내용은 ng-show 또는 ng-hide에 사용될 수 있습니다. 값이나 표현식 또는 함수가 true를 반환하면 뭔가가 숨겨져 있는 것입니다.

은 부울 값으로 사용됩니다.

ng-click을 사용하여 링크를 생성하고 goCats 값을 true 또는 false로 전환합니다.

<a href ng-click="goCats = !goCats">Toggle Cats</a>

그런 다음 ng-show를 사용하여 카테고리 이미지를 표시하거나 숨길 수 있습니다.

 
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src ng-src를 사용하여 이미지를 호출하므로 Angular는 이미지를 인스턴스화하고 확인할 때 숨길지 여부를 확인합니다. 이렇게 하지 않으면 Angular가 숨겨야 한다는 것을 인식할 때까지 사이트가 로드될 때 이미지가 팝업됩니다.

판결 표현

여기서는 입력 상자에서 전달된 문자열을 판단합니다. ng-mode를 입력 상자에 바인딩하고 이름을 아미노 변수로 지정하고 이 변수의 내용에 따라 다른 그림을 표시합니다.

다음으로 변수 이름을aminoal이라고 하겠습니다.

<input type="text" ng-model="aminal">

그런 다음 ng-show를 사용하여 문자열을 판단하겠습니다.

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

사용방법

입력된 값이 홀수인지 짝수인지 간단한 검사를 통해 확인하겠습니다. AngularJS 파일에 메소드를 생성하겠습니다:

// set the default value of our number
$scope.myNumber = 0;
   
// function to evaluate if a number is even
$scope.isEven = function(value) {
 
if (value % 2 == 0)
 return true;
else 
 return false;
 
};

메서드가 생성된 후 다음으로 해야 할 일은 ng-show 또는 ng-hide를 통해 이를 사용하고 숫자를 전달하는 것입니다. 메소드를 통해 숫자를 전달하면 Angular 컨트롤이 깨끗하고 테스트 가능하게 유지됩니다.

<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
  <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
  <h2>The number is odd.</h2>
</div>

결론

이 두 가지 방향의 안내로 우리의 응용 프로그램은 크게 향상될 것입니다. 이는 부울 값, 표현식 및 함수를 기반으로 기능을 표시하고 숨기는 요소일 뿐이지만 이 세 가지 모드는 더 많은 장면에 적용 가능합니다.