AngularJS: ng-show / ng-hide không hoạt động với phép nội suy `{{}}`

193

Tôi đang cố gắng hiển thị / ẩn một số HTML bằng cách sử dụng ng-showvà các ng-hidechức năng được cung cấp bởi AngularJS .

Theo tài liệu, cách sử dụng tương ứng cho các chức năng này như sau:

ngHide - {biểu thức} - Nếu biểu thức trung thực thì phần tử được hiển thị hoặc ẩn tương ứng. ngShow - {biểu thức} - Nếu biểu thức là trung thực thì phần tử được hiển thị hoặc ẩn tương ứng.

Điều này hoạt động cho usecase sau:

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

Tuy nhiên, chúng ta có nên sử dụng một tham số từ một đối tượng làm biểu thức sau đó ng-hidevà ng-showđược cho đúng true/ falsegiá trị nhưng các giá trị không được coi là boolean để luôn trả về false:

Nguồn

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

Kết quả

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

Đây là một lỗi hoặc tôi không làm điều này một cách chính xác.

Tôi không thể tìm thấy bất kỳ thông tin liên quan nào về việc tham chiếu các tham số đối tượng dưới dạng biểu thức vì vậy tôi hy vọng bất cứ ai hiểu rõ hơn về AngularJS có thể giúp tôi?

angularjs ng-show ng-hide

— Đầu tôi đau
nguồn

375

Các foo.bartài liệu tham khảo không nên chứa dấu ngoặc:

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

Biểu thức góc cần phải nằm trong các ràng buộc niềng răng, trong khi các chỉ thị của Angular thì không.

Xem thêm Hiểu các mẫu góc .

— Đầu tôi đau
nguồn

76

"Các biểu thức góc cần phải nằm trong các ràng buộc của hàm cong, trong khi các chỉ thị của Angular thì không." Dòng đó ngay đó. Tôi ước tôi có thể nâng cấp điều này hai lần.

— MushinNoShin

3

Nếu bạn muốn kiểm tra xem <p ng-show="foo.bar === 'test'">I could be shown, or I could be hidden</p>

— tệp

1

Cảm ơn, điều này không trực quan lắm (như bạn có thể nói từ tất cả các lượt bình chọn)

— Sentient

1

Tài liệu cho ng-hide ( docs.angularjs.org/api/ng/directive/ngHide ) đặc biệt gọi đối số là một biểu thức, có nghĩa là nó yêu cầu dấu ngoặc nhọn. Tôi đang thiếu gì ở đây?

— Ed Norris

1

Câu trả lời này thực sự không chính xác. Các dấu ngoặc nhọn chỉ ra rằng biểu thức nên được thực thi và kết quả của nó sẽ được chèn vào DOM, trong khi chỉ thị có thể hoặc không thể coi giá trị thuộc tính là một biểu thức tùy thuộc vào logic của nó. Một số chỉ thị (ngHref) thậm chí còn hỗ trợ các ràng buộc nẹp xoăn.

— Vasaka

31

Bạn không thể sử dụng {{}}khi sử dụng các chỉ thị góc để liên kết với ng-modelnhưng để ràng buộc các thuộc tính không góc mà bạn sẽ phải sử dụng {{}}..

Ví dụ:

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

— SANGHI SANGHI
nguồn

18

Hãy thử biểu thức gói với:

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

— giờ
nguồn

7

các foo.bar = truenên scope.foo.bar = true, để thay đổi giá trị củafoo.bar

— Rajkamal Subramanian

1

Tôi đã gặp một vấn đề kỳ lạ khi đôi khi nó sẽ được hiển thị và đôi khi nó không xảy ra, gói các cập nhật phạm vi của tôi trong $ scope. $ Áp dụng (function () {}); làm việc cho tôi :)

— bao giờ mới

Tôi mới đến góc cạnh và tôi thực sự không muốn làm điều này mỗi khi tôi cần đặt một biến. Ai đó có thể giải thích tại sao điều này đôi khi cần thiết?

— davis

Một bài viết blog hữu ích đã giúp tôi trả lời điều này. Hóa ra bất kỳ người nghe Ajax hoặc người nghe tùy chỉnh nào cũng sẽ gặp vấn đề khi cập nhật và yêu cầu$scope.$apply

— davis

7

Vì ng-showtôi nghĩ là một thuộc tính góc, chúng ta không cần đặt dấu ngoặc hoa đánh giá ( {{}}) ..

Đối với các thuộc tính như classchúng ta cần đóng gói các biến bằng dấu ngoặc hoa ( {{}}).

— Rajkamal Subramanian
nguồn

gần gũi - Tôi đã nhìn vào đó và có vẻ như các biểu thức góc cần phải nằm trong dấu ngoặc nhọn mà các chỉ thị góc không

— Đầu tôi đau

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>

— Anil Singh
nguồn

0

xóa {{}} dấu ngoặc quanh foo.bar vì các biểu thức góc có thể được sử dụng trong các chỉ thị góc.

Để biết thêm: https://docs.angularjs.org/api/ng/directive/ngShow

thí dụ

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

— Vijay Kumar Reddy
nguồn

-1

Nếu bạn muốn hiển thị / ẩn một phần tử dựa trên trạng thái của một {{biểu thức}}, bạn có thể sử dụng ng-switch:

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

Đoạn văn sẽ được hiển thị khi foo.bar là đúng, ẩn khi sai.

— Roberto
nguồn