อะไรคือวิธีที่ดีที่สุดในการใช้คุณสมบัติตามเงื่อนไขใน AngularJS

ฉันต้องสามารถเพิ่มตัวอย่างเช่น "contenteditable" เพื่อองค์ประกอบขึ้นอยู่กับตัวแปรบูลีนในขอบเขต

ตัวอย่างการใช้:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

จะส่งผลให้ contenteditable = true ถูกเพิ่มเข้ากับองค์ประกอบหาก$scope.editModeถูกตั้งค่าเป็นtrueถูกกำหนดให้มีวิธีง่าย ๆ ในการใช้ ng-class เช่นลักษณะการทำงานของคุณลักษณะ? ฉันกำลังพิจารณาที่จะเขียนคำสั่งและการแบ่งปันหากไม่ได้

แก้ไข: ฉันเห็นว่ามีความคล้ายคลึงกันระหว่างคำสั่ง attrs ที่ฉันเสนอกับng-bind-attrs แต่มันถูกลบใน 1.0.0.rc3ทำไม?

ฉันใช้สิ่งต่อไปนี้เพื่อตั้งค่า class attr แบบไม่มีเงื่อนไขเมื่อไม่สามารถใช้ ng-class ได้ (ตัวอย่างเช่นเมื่อใส่สไตล์ SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

วิธีการเดียวกันควรใช้กับประเภทแอตทริบิวต์อื่น ๆ

(ฉันคิดว่าคุณต้องเป็น Angular ที่ไม่เสถียรล่าสุดเพื่อใช้ ng-attr- ตอนนี้ฉันใช้ 1.1.4)

คุณสามารถใส่คำนำหน้าแอตทริบิวต์ด้วยng-attrเพื่อประเมินนิพจน์เชิงมุม เมื่อผลลัพธ์ของนิพจน์ไม่ได้กำหนดจะเป็นการลบค่าออกจากแอททริบิวต์

<a ng-attr-href="{{value || undefined}}">Hello World</a>

จะผลิต (เมื่อค่าเป็นเท็จ)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

ดังนั้นอย่าใช้ falseเพราะจะทำให้คำว่า "เท็จ" เป็นค่า

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

เมื่อใช้เคล็ดลับนี้ในคำสั่ง คุณลักษณะสำหรับคำสั่งจะเป็นเท็จหากไม่มีค่า

ตัวอย่างข้างต้นจะเป็นเท็จ

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

ฉันได้รับการทำงานโดยการตั้งค่าคุณลักษณะอย่างหนัก และการควบคุมการบังคับใช้คุณสมบัติโดยใช้ค่าบูลีนสำหรับแอตทริบิวต์

นี่คือข้อมูลโค้ด:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

ฉันหวังว่านี่จะช่วยได้.

ในรุ่นล่าสุดของเชิงมุม (1.1.5) ngIfพวกเขาได้รวมคำสั่งเงื่อนไขที่เรียกว่า มันแตกต่างจากngShowและngHideในที่องค์ประกอบจะไม่ถูกซ่อน แต่ไม่รวมอยู่ใน DOM เลย มันมีประโยชน์มากสำหรับส่วนประกอบที่มีค่าใช้จ่ายสูงในการสร้าง แต่ไม่ได้ใช้:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

ในการรับแอตทริบิวต์เพื่อแสดงค่าเฉพาะตามการตรวจสอบบูลีนหรือถูกละเว้นทั้งหมดหากการตรวจสอบบูลีนล้มเหลวฉันใช้ต่อไปนี้:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

ตัวอย่างการใช้งาน:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

จะส่งออก<div class="itWasTest">หรือ<div>ตามมูลค่าของparams.type

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

จะผลิตเมื่อ isTrue = จริง: <h1 contenteditable="true">{{content.title}}</h1>

และเมื่อ isTrue = false: <h1>{{content.title}}</h1>

เกี่ยวกับโซลูชันที่ยอมรับวิธีการที่โพสต์โดย Ashley Davis วิธีที่อธิบายยังคงพิมพ์แอตทริบิวต์ใน DOM โดยไม่คำนึงถึงความจริงที่ว่าค่าที่ได้รับมอบหมายนั้นไม่ได้กำหนด

ตัวอย่างเช่นในการตั้งค่าฟิลด์อินพุตที่มีทั้ง ng-model และ attribute value

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

โดยไม่คำนึงถึงสิ่งที่อยู่เบื้องหลัง myValue คุณค่าแอตทริบิวต์ยังคงได้รับการพิมพ์ใน DOM ดังนั้นตีความ จากนั้นนางแบบของ Ng จะกลายเป็นคนแทนที่

ค่อนข้างไม่เป็นที่พอใจ แต่การใช้ ng-if จะหลอกลวง:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

ฉันอยากจะแนะนำให้ใช้การตรวจสอบรายละเอียดเพิ่มเติมภายในคำสั่ง ng-if :)

นอกจากนี้คุณสามารถใช้นิพจน์เช่นนี้:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

ฉันจริง ๆ เขียนโปรแกรมแก้ไขการทำเช่นนี้ไม่กี่เดือนที่ผ่านมา (หลังจากมีคนถามเกี่ยวกับมันใน #angularjs บน freenode)

มันอาจจะไม่ถูกผสาน แต่คล้ายกับ ngClass: https://github.com/angular/angular.js/pull/4269

ไม่ว่ามันจะถูกผสานหรือไม่ก็ตามสิ่งที่มีอยู่ใน ng-attr- * นั้นน่าจะเหมาะกับความต้องการของคุณ (ตามที่คนอื่น ๆ พูดถึง) แม้ว่ามันอาจจะฟังดูแปลก ๆ มากกว่าฟังก์ชั่นสไตล์ ngClass ที่คุณแนะนำ

สำหรับการตรวจสอบฟิลด์อินพุตคุณสามารถทำได้:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

นี้จะนำไปใช้แอตทริบิวต์maxการ100เฉพาะในกรณีที่discountTypeถูกกำหนดให้เป็น%

แก้ไข : คำตอบนี้เกี่ยวข้องกับ Angular2 +! ขออภัยฉันพลาดแท็ก!

คำตอบเดิม:

สำหรับกรณีที่ง่ายมากเมื่อคุณต้องการใช้ (หรือตั้งค่า) แอททริบิวหากมีการตั้งค่าอินพุตบางอย่างมันก็ง่ายเหมือน

<my-element [conditionalAttr]="optionalValue || false">

มันเหมือนกับ:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(ดังนั้น optionalValue จะถูกนำไปใช้หากได้รับเป็นอย่างอื่นนิพจน์เป็นเท็จและไม่ได้ใช้แอตทริบิวต์)

ตัวอย่าง: ฉันมีกรณีที่ฉันปล่อยให้ใช้สี แต่ยังมีรูปแบบโดยพลการซึ่งคุณลักษณะสีไม่ทำงานตามที่ตั้งค่าไว้แล้ว (แม้ว่าจะไม่มีการระบุสี @Input ()):

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

ดังนั้น "style.color" จึงถูกตั้งค่าไว้เท่านั้นเมื่อแอตทริบิวต์ color อยู่ที่นั่นมิฉะนั้นจะสามารถใช้แอตทริบิวต์ color ในสตริง "styles" ได้

แน่นอนว่าสิ่งนี้สามารถทำได้ด้วย

[style.color]="color" 

และ

@Input color: (string | boolean) = false;

ในกรณีที่คุณต้องการวิธีแก้ปัญหาสำหรับ Angular 2 แล้วให้ใช้การผูกคุณสมบัติแบบด้านล่างเช่นคุณต้องการให้อินพุตอ่านอย่างเดียวแบบมีเงื่อนไขแล้วเพิ่มวงเล็บปีกกาที่ attrbute ตามด้วยเครื่องหมาย = และนิพจน์

<input [readonly]="mode=='VIEW'"> 

สามารถทำงานนี้ได้:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

สิ่งที่ดีที่นี่คือถ้า item.isSelected เป็นเท็จแล้วแอตทริบิวต์ก็จะไม่แสดงผล