có điều kiện thêm thuộc tính phần tử trong angular.js

Question

Tôi đang cố thêm thuộc tính autoplay vào thẻ video dựa trên biến phạm vi is_autoplay.

Tôi đã tìm kiếm tất cả qua internet, nhưng tôi không thể tìm thấy đoạn trích chính xác mà tôi muốn.

Tôi đã thử làm theo nhưng không có cách nào trong số đó hoạt động.

---

<video autoplay="{{is_autoplay ? 'true' : 'false'}}"> 
    ... 

---

<video ng-attr-autoplay="{is_autoplay}"> 
    ... 

---

Có người thậm chí còn gợi ý sau

<video {{is_autoplay ? "autoplay" : ""}}> 
    ... 

---

---

Sau đây giải quyết được vấn đề của tôi.

app.directive('attronoff', function() { 
    return { 
    link: function($scope, $element, $attrs) { 
     $scope.$watch(
      function() { return $element.attr('data-attr-on'); }, 
      function (newVal) { 
       var attr = $element.attr('data-attr-name'); 

       if(!eval(newVal)) { 
        $element.removeAttr(attr); 
       } 
       else { 
        $element.attr(attr, attr); 
       } 
      } 
     ); 
     } 
    }; 
}); 

Bất kỳ ai cũng có thể sử dụng chỉ thị này để thêm/xóa thuộc tính có điều kiện.

Usage

<video width="100%" height="100%" controls attronoff data-attr-on="{{is_autoplay}}" data-attr-name="autoplay"> 
    ... 

Answer 1

Một giải pháp đơn giản sẽ được sử dụng để tạo ra các ng-if dom dựa trên điều kiện.

Ví dụ trong trường hợp của bạn, sử dụng

<video autoplay="true" ng-if="is_autoplay">...</video> 
<video ng-if="!is_autoplay">...</video> 

Vì vậy, nếu is_autoplay là true, yếu tố đầu tiên sẽ được tạo ra với autoplay thuộc tính và thứ hai trên sẽ không được trong dom.

Nếu is_autoplay là false, yếu tố dom thứ hai sẽ được tạo ra mà không có sự autoplay attribue.

Answer 2

Bạn cũng có thể trực tiếp đặt thuộc tính autoplay dựa trên tài sản is_autoplay của bạn:

<video autoplay="{{is_autoplay}}">...</video>