ng-show="true"이지만 아직 class="ng-hide"가 있습니다.
Angular JS는 처음이라 간단한 해결 방법이 있을 수 있습니다.이 양식을 작성하고 있어요.두 가지 입력이 있습니다. 하나는 문 수에 대한 입력이고 다른 하나는 창문 수에 대한 입력입니다.그런 다음 특정 개수의 문과 창을 충족하는지 보여 주는 여러 개의 디브(div)가 있습니다.입력에 숫자를 입력하면 ng-show는 true로 해결됩니다.그러나 이 요소에는 여전히 숨겨진 "ng-hide" 클래스가 있습니다.
다음은 제 코드의 예입니다.
<body ng-app>
Doors: <input type="number" ng-model="doors"><br>
Windows: <input type="number" ng-model="windows"><br>
<div ng-show="{{(doors + windows) < 6}}">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 5 && (doors + windows) < 11}}">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="{{(doors + windows) > 10 }}">
Shows if you have more than 10 doors and windows combined.
</div>
</body>
3개의 문과 4개의 창을 열었을 때의 출력은 다음과 같습니다.
<div ng-show="false" class="ng-hide">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="true" class="ng-hide">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="false" class="ng-hide">
Shows if you have more than 10 doors and windows combined.
</div>
ngShow Angular 표현식을 사용하기 때문에 이중 곱슬머리 괄호는 사용하지 마십시오.
이 방법은 다음과 같습니다.
<div ng-show="(doors + windows) < 6">
Shows if you have 0-5 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 5 && (doors + windows) < 11">
Shows if you have 6-10 doors and windows combined.
</div>
<div ng-show="(doors + windows) > 10">
Shows if you have more than 10 doors and windows combined.
</div>
소스코드에 대해 알아보겠습니다.
var ngShowDirective = ['$animate', function($animate) {
return function(scope, element, attr) {
scope.$watch(attr.ngShow, function ngShowWatchAction(value){
$animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
});
};
}];
중요한 건 그게 감시장치를 달아서attr.ngShow이 Atribute를 다음과 같이 설정했을 때{{(doors + windows) < 6}}가장 먼저 발생하는 것은 이중괄호 안의 표현이 평가된다는 것입니다.당신의 경우, 문과 창문이 밖으로 나옵니다.undefined그래서 그 표현은 다음과 같이 평가된다.false.그리고나서falseAtribute에 전달됩니다.비상대기상태$watch에 배치되어 있다.false그리고 모든$digest사이클false체크되어 있습니다.false계속 존재하다false시계 기능이 작동하지 않습니다.
주의할 점은 속성 자체는 감시되지 않지만 처음에 전달된 값은 감시된다는 것입니다.따라서 나중에 속성을 "true"로 변경하고 html에서 변경 내용을 확인하더라도 워치는 이를 전혀 인식하지 못합니다.
대신, 우리가 지나가면(doors + windows) < 6~하듯이attr.ngShow그 후 각자에게$digest그$watch는 그 표현을 평가합니다.그리고 식 결과가 바뀔 때마다 워치 함수를 호출하여 적절한 클래스를 설정합니다.
언급URL : https://stackoverflow.com/questions/21129912/ng-show-true-but-still-has-class-ng-hide
'programing' 카테고리의 다른 글
| angularjs의 여러 js 파일에서 단일 컨트롤러를 분할하는 방법 (0) | 2023.02.08 |
|---|---|
| 개체를 병합하는 방법 (0) | 2023.02.08 |
| Jackson이 값을 문자열로 읽음 (0) | 2023.02.08 |
| Swift 3.0: 데이터를 JSON으로 [String : Any] (0) | 2023.02.08 |
| $parse, $interpolate 및 $compile 서비스의 차이점은 무엇입니까? (0) | 2023.02.08 |