คุณจะทำไตรภาคกับ AngularJS (ในแม่แบบ) ได้อย่างไร?
มันจะเป็นการดีที่จะใช้บางอย่างในคุณลักษณะ html (คลาสและสไตล์) แทนที่จะสร้างและเรียกใช้ฟังก์ชันของคอนโทรลเลอร์
คุณจะทำไตรภาคกับ AngularJS (ในแม่แบบ) ได้อย่างไร?
มันจะเป็นการดีที่จะใช้บางอย่างในคุณลักษณะ html (คลาสและสไตล์) แทนที่จะสร้างและเรียกใช้ฟังก์ชันของคอนโทรลเลอร์
คำตอบ:
ปรับปรุง : Angular 1.1.5 เพิ่มผู้ประกอบการที่ประกอบไปด้วยดังนั้นตอนนี้เราสามารถเขียน
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">หากคุณใช้ Angular รุ่นก่อนหน้าตัวเลือกสองทางของคุณคือ:
(condition && result_if_true || !condition && result_if_false){true: 'result_if_true', false: 'result_if_false'}[condition]รายการ 2. ด้านบนสร้างวัตถุที่มีคุณสมบัติสองประการ ไวยากรณ์ของอาร์เรย์ใช้เพื่อเลือกคุณสมบัติที่มีชื่อจริงหรือคุณสมบัติที่มีชื่อเป็นเท็จและส่งคืนค่าที่เกี่ยวข้อง
เช่น,
<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>
$ first ถูกตั้งค่าเป็นจริงภายใน ng-repeat สำหรับองค์ประกอบแรกดังนั้นข้างต้นจะใช้คลาส 'myClass1' และ 'myClass2' เพียงครั้งแรกผ่านลูป
ด้วยng-classมีวิธีที่ง่ายกว่าแม้ว่า: ng-class รับนิพจน์ที่ต้องประเมินเป็นอย่างใดอย่างหนึ่งต่อไปนี้:
ตัวอย่างของ 1) ได้รับด้านบน นี่คือตัวอย่างของ 3 ซึ่งฉันคิดว่าอ่านดีกว่ามาก:
<li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>ครั้งแรกที่ผ่านการวนซ้ำ ng จะเพิ่มคลาส myClass ครั้งที่ 3 ถึง ($ index เริ่มต้นที่ 0), class anotherClass ถูกเพิ่มเข้ามา
ng-styleรับนิพจน์ที่ต้องประเมินเป็นแผนที่ / วัตถุของชื่อสไตล์ CSS เป็นค่า CSS เช่น,
<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>ng-styleอัปเดต แต่ดูเหมือนว่าจะประเมินเฉพาะเมื่อมีการแสดงองค์ประกอบเป็นครั้งแรก (noob เชิงมุมที่นี่)
ปรับปรุง: Angular 1.1.5 เพิ่มผู้ประกอบการที่ประกอบไปด้วยสามคำตอบนี้ถูกต้องเฉพาะกับรุ่นก่อนหน้า 1.1.5 สำหรับ 1.1.5 และใหม่กว่าให้ดูคำตอบที่ยอมรับในปัจจุบัน
ก่อนเชิงมุม 1.1.5:
รูปแบบของไตรภาคใน angularjs คือ:
((condition) && (answer if true) || (answer if false))ตัวอย่างจะเป็น:
<ul class="nav">
<li>
<a href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
</li>
<li>
<a href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
</li>
</ul>
หรือ:
<li ng-disabled="currentPage == 0" ng-click="currentPage=0" class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>สำหรับข้อความในเทมเพลตเชิงมุม ( userTypeเป็นคุณสมบัติของ $ scope เช่น $ scope.userType):
<span>
{{userType=='admin' ? 'Edit' : 'Show'}}
</span>ในตอนนี้เราพบว่าเวอร์ชั่น1.1.5มาพร้อมกับส่วนที่สามของ$parseฟังก์ชันดังนั้นให้ใช้คำตอบนี้เป็นตัวอย่างของตัวกรอง:
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});และจากนั้นใช้มันเป็น
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>มีผู้ประกอบการที่ประกอบไปด้วยสามคนเพิ่มเข้าไปใน parser เชิงมุมใน1.1.5 ! ดูการเปลี่ยนแปลง
นี่คือซอแสดงโอเปอร์เรเตอร์ใหม่ที่ใช้ในคำสั่ง ng-class
ng-class="boolForTernary ? 'blue' : 'red'"ในขณะที่คุณสามารถใช้condition && if-true-part || if-false-part-syntax ในรุ่นเก่าของเชิงมุมผู้ประกอบ ternary ปกติcondition ? true-part : false-partมีอยู่ในเชิงมุม 1.1.5 และต่อมา
<body ng-app="app">
<button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'" class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
<div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
<div class="panel-heading">Take Quiz</div>
<div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">
<button type="button" class="btn btn-default">Start Quiz</button>
</div>
</div>
</body>สลับปุ่มและเปลี่ยนส่วนหัวของปุ่มและแสดง / ซ่อนแผงควบคุม ดูPlunkr