Cách tốt nhất để áp dụng có điều kiện các thuộc tính trong AngularJS là gì?

Tôi cần có thể thêm ví dụ "có thể nội dung" vào các phần tử, dựa trên một biến boolean trên phạm vi.

Ví dụ sử dụng:

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

Sẽ dẫn đến contenteditable = true được thêm vào phần tử nếu $scope.editModeđược đặt thành true. Có một số cách dễ dàng để thực hiện hành vi thuộc tính giống như lớp ng này? Tôi đang xem xét viết một chỉ thị và chia sẻ nếu không.

Chỉnh sửa: Tôi có thể thấy rằng dường như có một số điểm tương đồng giữa chỉ thị attrs được đề xuất của tôi và ng-bind-attrs, nhưng nó đã bị xóa trong 1.0.0.rc3 , tại sao vậy?

Tôi đang sử dụng cách sau để đặt điều kiện lớp attr khi lớp ng-class không thể được sử dụng (ví dụ: khi tạo kiểu SVG):

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

Cách tiếp cận tương tự sẽ làm việc cho các loại thuộc tính khác.

(Tôi nghĩ rằng bạn cần phải có Angular không ổn định mới nhất để sử dụng ng-attr-, tôi hiện đang ở 1.1.4)

Bạn có thể thêm các thuộc tính tiền tố ng-attrđể đánh giá một biểu thức Angular. Khi kết quả của các biểu thức không xác định, điều này sẽ loại bỏ giá trị khỏi thuộc tính.

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

Sẽ sản xuất (khi giá trị là sai)

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

Vì vậy, không sử dụng false vì điều đó sẽ tạo ra từ "false" làm giá trị.

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

Khi sử dụng thủ thuật này trong một chỉ thị. Các thuộc tính cho lệnh sẽ là sai nếu chúng thiếu một giá trị.

Ví dụ, ở trên sẽ là sai.

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

Tôi đã làm việc này bằng cách thiết lập cứng thuộc tính. Và kiểm soát khả năng ứng dụng thuộc tính bằng cách sử dụng giá trị boolean cho thuộc tính.

Đây là đoạn mã:

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

Tôi hi vọng cái này giúp được.

Trong phiên bản mới nhất của Angular (1.1.5), chúng đã bao gồm một lệnh có điều kiện được gọi ngIf. Nó khác với ngShowvà ngHideở chỗ các yếu tố không bị ẩn, nhưng hoàn toàn không được bao gồm trong DOM. Chúng rất hữu ích cho các thành phần tốn kém để tạo nhưng không được sử dụng:

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

Để có được một thuộc tính hiển thị một giá trị cụ thể dựa trên kiểm tra boolean hoặc bị bỏ qua hoàn toàn nếu kiểm tra boolean không thành công, tôi đã sử dụng như sau:

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

Ví dụ sử dụng:

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

Sẽ đầu ra <div class="itWasTest">hoặc <div>dựa trên giá trị củaparams.type

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

sẽ tạo khi isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

và khi isTrue = false: <h1>{{content.title}}</h1>

Về giải pháp được chấp nhận, một giải pháp được đăng bởi Ashley Davis, phương thức được mô tả vẫn in thuộc tính trong DOM, bất kể thực tế là giá trị mà nó được gán là không xác định.

Ví dụ: trên thiết lập trường đầu vào có cả thuộc tính ng-model và thuộc tính value:

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

Bất kể những gì đằng sau myValue, giá trị thuộc tính vẫn được in trong DOM, do đó, được giải thích. Ng-model sau đó, trở nên bị ghi đè.

Một chút khó chịu, nhưng sử dụng ng-if thực hiện thủ thuật:

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

Tôi sẽ khuyên bạn nên sử dụng kiểm tra chi tiết hơn bên trong các chỉ thị ng-if :)

Ngoài ra, bạn có thể sử dụng một biểu thức như thế này:

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

Tôi thực sự đã viết một bản vá để làm điều này một vài tháng trước (sau khi có ai đó hỏi về nó trong #angularjs trên freenode).

Nó có thể sẽ không được hợp nhất, nhưng nó rất giống với ngClass: https://github.com/angular/angular.js/pull/4269

Cho dù nó có được hợp nhất hay không, công cụ ng-attr- * hiện tại có thể phù hợp với nhu cầu của bạn (như những người khác đã đề cập), mặc dù nó có thể hơi khó hiểu hơn chức năng kiểu ngClass mà bạn đang đề xuất.

Để xác thực trường đầu vào, bạn có thể làm:

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

Điều này sẽ áp dụng các thuộc tính maxđể 100chỉ khi discountTypeđược định nghĩa là%

Chỉnh sửa : Câu trả lời này có liên quan đến Angular2 +! Xin lỗi, tôi đã bỏ lỡ thẻ!

Câu trả lời gốc:

Đối với trường hợp rất đơn giản khi bạn chỉ muốn áp dụng (hoặc đặt) một thuộc tính nếu một giá trị Đầu vào nào đó được đặt, nó dễ như

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

Nó giống như:

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

(Vì vậy, tùy chọnValue được áp dụng nếu được đưa ra nếu không biểu thức là sai và thuộc tính không được áp dụng.)

Ví dụ: Tôi đã gặp trường hợp, trong đó tôi cho phép áp dụng một màu nhưng cũng có kiểu tùy ý, trong đó thuộc tính màu không hoạt động như đã được đặt (ngay cả khi màu @Input () không được cung cấp):

@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;
...
}

Vì vậy, "style.color" chỉ được đặt, khi thuộc tính màu ở đó, nếu không thì có thể sử dụng thuộc tính màu trong chuỗi "style".

Tất nhiên, điều này cũng có thể đạt được với

[style.color]="color" 

và

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

Chỉ trong trường hợp bạn cần giải pháp cho Angular 2 thì đơn giản, hãy sử dụng ràng buộc thuộc tính như bên dưới, ví dụ bạn muốn làm cho đầu vào chỉ đọc có điều kiện, sau đó thêm vào dấu ngoặc vuông theo dấu attrbute theo sau = dấu và biểu thức.

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

Đã có thể làm việc này:

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

Điều thú vị ở đây là nếu item.isSelected là false thì thuộc tính đơn giản là không được hiển thị.