有條件地在angular.js中添加一個元素屬性

我想添加一個自動播放屬性到基於is_autoplay範圍變量的視頻標籤。有條件地在angular.js中添加一個元素屬性

我在互聯網上搜索了所有，但我找不到我想要的確切片段。

我試過以下，但都沒有工作。

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

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

有人甚至提出以下

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

以下解決了我的問題。

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); 
       } 
      } 
     ); 
     } 
    }; 
});

任何人都可以使用這個指令添加/刪除有條件屬性。

Usage

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

來源

2014-06-10 adeltahir

我知道這是晚了，但可能是有用的。對於角度爲1.3+以及沒有值的屬性（例如自動播放或必需），您可以使用'undefined'：''。它被刪除，因爲ng-attr-具有刪除屬性的allOrNothing功能，如果表達式產生未定義的話。 –

一個簡單的解決辦法是使用ng-if生成基於條件的DOM。

例如，在你的情況下，使用

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

所以，如果is_autoplay是true，第一個元素將與autoplay屬性和第二上生成不會在DOM。

如果is_autoplay是false，則會生成第二個dom元素，而不生成autoplay屬性。

來源

2014-06-10 08:28:35 guru

謝謝。我知道這會奏效，但這種方法並不總是一個好的選擇。 – adeltahir

您也可以直接設置根據您is_autoplay財產自動播放屬性：

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

來源

2015-06-14 22:57:29 jbolle

「自動播放屬性是一個布爾屬性。當前，音頻會自動開始播放，只要它可以不停止。」 – gugol

有條件地在angular.js中添加一個元素屬性

回答

相關問題