AngularJS: ng-show / ng-hide ไม่ทำงานกับการแก้ไข {{}} `

193

ฉันพยายามที่จะแสดง / ซ่อนบาง HTML ใช้ng-showและng-hideฟังก์ชั่นให้โดยAngularJS

ตามเอกสารประกอบการใช้งานที่เกี่ยวข้องสำหรับฟังก์ชั่นเหล่านี้มีดังนี้:

ngHide - {expression} - หากการแสดงออกจริงแล้วองค์ประกอบจะแสดงหรือซ่อนตามลำดับ ngShow - {expression} - หากการแสดงออกเป็นความจริงแล้วองค์ประกอบจะถูกแสดงหรือซ่อนตามลำดับ

สิ่งนี้ใช้ได้กับ usecase ต่อไปนี้:

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

อย่างไรก็ตามเราควรใช้พารามิเตอร์จากวัตถุเป็นนิพจน์แล้วng-hideและ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 () {}); ทำงานให้ฉัน :)

— เคยใหม่

ฉันใหม่กับเชิงมุมและฉันค่อนข้างจะไม่ทำเช่นนี้ทุกครั้งที่ฉันต้องตั้งค่าตัวแปร บางคนสามารถอธิบายได้ว่าทำไมบางครั้งถึงมีความจำเป็น

— วิส

การโพสต์บล็อกที่มีประโยชน์ช่วยฉันตอบคำถามนี้ ปรากฎว่าอาแจ็กซ์หรือผู้ฟังที่กำหนดเองจะมีปัญหาในการอัปเดตและต้องการ$scope.$apply

— วิส

7

เนื่องจากng-showเป็นคุณลักษณะเชิงมุมฉันคิดว่าเราไม่จำเป็นต้องใส่วงเล็บดอกไม้การประเมิน ( {{}}) ..

สำหรับคุณลักษณะเช่นclassเราต้องสรุปแค็ปซูลตัวแปรด้วยวงเล็บดอกไม้ประเมินผล ( {{}})

— ราชภัฏซับรามันน
แหล่งที่มา

ปิด - ฉันมองเข้าไปและดูเหมือนว่าการแสดงออกเชิงมุมต้องอยู่ในวงเล็บปีกกาซึ่งคำสั่งเชิงมุมไม่ได้

— My Head Hurts

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 เป็นจริงซ่อนอยู่เมื่อเท็จ

— โรแบร์โต
แหล่งที่มา