AngularJS : ng-show / ng-hide가`{{}}`보간에서 작동하지 않습니다

193

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에 대해 잘 이해하는 사람이 나를 도울 수 있기를 바랍니다.

angularjs ng-show ng-hide

— 내 머리가 아파요
소스

375

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>

각도 표현식 은 중괄호 바인딩 내에 있어야하며, 여기서 각도 지시문 은 그렇지 않습니다.

각도 템플릿 이해를 참조하십시오 .

— 내 머리가 아파요
소스

76

"각도 표현은 중괄호 바인딩 내에 있어야하며, 여기서 각도 지시문은 그렇지 않습니다." 저 줄이야 나는 이것을 두 번 공표 할 수 있으면 좋겠다.

— MushinNoShin

3

파일에 값이 있는지 확인하려면 다음을 사용하십시오.<p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— czerasz

1

감사합니다. 이것은 모든

— 직권

1

ng-hide에 대한 문서 ( docs.angularjs.org/api/ng/directive/ngHide )는 특히 인수를 표현식이라고 부릅니다. 즉, 중괄호가 필요합니다. 내가 여기서 무엇을 놓치고 있습니까?

— Ed Norris

1

이 답변은 실제로 정확하지 않습니다. 중괄호는 표현식이 실행되고 결과가 DOM에 삽입되어야 함을 나타내며 지시문은 논리에 따라 속성 값을 표현식으로 처리하거나 처리하지 않을 수 있습니다. 일부 지시문 (ngHref)은 중괄호 바인딩도 지원합니다.

— Vasaka

31

{{}}앵귤러 지시문을 사용할 때는 바인딩 할 수 ng-model없지만 앵귤러가 아닌 속성을 바인딩 할 때는 {{}}.. 를 사용해야합니다 .

예 :

ng-show="my-model"
title = "{{my-model}}"

— SHIVANG SANGHI
소스

18

다음과 같이 식을 래핑하십시오.

$scope.$apply(function() {
   $scope.foo.bar=true;
})

— hrn
소스

7

이 foo.bar = true있어야 scope.foo.bar = true의 값 변경foo.bar

— Rajkamal Subramanian

1

때때로 범위 업데이트가 $ scope. $ apply (function () {}); 나를 위해 일했다 :)

— nevernew

나는 각도에 익숙하지 않으며 변수를 설정해야 할 때마다 실제로 이것을하지 않을 것입니다. 누군가 왜 이것이 필요한지 설명 할 수 있습니까?

— Davis

도움이 블로그 게시물은 날이 답변을 도왔다. Ajax 또는 커스텀 리스너는 업데이트에 문제가 있고$scope.$apply

— davis가

7

ng-show내가 생각하는 각도 속성 이므로 평가 꽃 괄호 ( {{}}) 를 넣을 필요가 없습니다 .

이와 같은 속성의 경우 class평가 꽃 괄호 ( {{}})로 변수를 캡슐화해야합니다 .

— 라즈 카말 수 브라마 니안
소스

가까운 - 나는 그것으로 보았다는 각 보인다 표현은 각 중괄호 내에서 할 필요가 지시어를 하지 않습니다

— 내 머리가 아파

7

<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>

— 아닐 싱
소스

0

각도 지시문은 각도 지시문에서 사용할 수 없으므로 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>

— 비제이 쿠마 레디
소스

-1

하나의 {{expression}} 상태에 따라 요소를 표시하거나 숨기려면 다음을 사용할 수 있습니다 ng-switch.

<p ng-switch="foo.bar">I could be shown, or I could be hidden</p>

foo.bar가 true이면 단락이 표시되고 false이면 숨겨집니다.

— 로베르토
소스