AngularJS에서 제공 하는 ng-show및 ng-hide함수를 사용하여 일부 HTML을 표시하거나 숨기려고 합니다.
설명서에 따르면 이러한 기능의 각 사용법은 다음과 같습니다.
ngHide – {expression}-표현이 진실이면 요소가 각각 표시되거나 숨겨집니다. ngShow – {expression}-표현식이 사실이면 요소가 각각 표시되거나 숨겨집니다.
이것은 다음 유스 케이스에서 작동합니다.
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>그러나 객체의 매개 변수를 식으로 사용하면 ng-hideand ng-show에 올바른 true/ false값 이 주어 지지만 값은 부울로 처리되지 않으므로 항상 반환하십시오 false.
출처
<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>결과
<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>이것은 버그이거나 올바르게 수행하지 않습니다.
객체 매개 변수를 표현식으로 참조하는 것에 대한 상대 정보를 찾을 수 없으므로 AngularJS에 대해 잘 이해하는 사람이 나를 도울 수 있기를 바랍니다.
답변
foo.bar참조는 중괄호를 포함 할 수 없습니다 :
<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>각도 표현식 은 중괄호 바인딩 내에 있어야하며, 여기서 각도 지시문 은 그렇지 않습니다.
각도 템플릿 이해를 참조하십시오 .
답변
{{}}앵귤러 지시문을 사용할 때는 바인딩 할 수 ng-model없지만 앵귤러가 아닌 속성을 바인딩 할 때는 {{}}.. 를 사용해야합니다 .
예 :
ng-show="my-model"
title = "{{my-model}}"답변
다음과 같이 식을 래핑하십시오.
$scope.$apply(function() {
$scope.foo.bar=true;
})답변
ng-show내가 생각하는 각도 속성 이므로 평가 꽃 괄호 ( {{}}) 를 넣을 필요가 없습니다 .
이와 같은 속성의 경우 class평가 꽃 괄호 ( {{}})로 변수를 캡슐화해야합니다 .
답변
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript">
function controller($scope) {
$scope.data = {
show: true,
hide: false
};
}
</script>
<div ng-controller="controller">
<div ng-show="data.show"> If true the show otherwise hide. </div>
<div ng-hide="!(data.hide)"> If true the show otherwise hide.</div>
</div>답변
각도 지시문은 각도 지시문에서 사용할 수 없으므로 foo.bar 주위의 {{}} 중괄호를 제거하십시오.
더 : https://docs.angularjs.org/api/ng/directive/ngShow
예
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<p ng-show="foo.bar">I could be shown, or I could be hidden</p>
<p ng-hide="foo.bar">I could be shown, or I could be hidden</p>
</div>
</body>
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.foo ={};
$scope.foo.bar = true;
}]);
</script>답변
하나의 {{expression}} 상태에 따라 요소를 표시하거나 숨기려면 다음을 사용할 수 있습니다 ng-switch.
<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>foo.bar가 true이면 단락이 표시되고 false이면 숨겨집니다.
