angularjs之有条件地在 angular.js 中添加元素属性

这个问题在这里已经有了答案:





What is the best way to conditionally apply attributes in AngularJS?

(13 个回答)


6年前关闭。




我正在尝试基于 is_autoplay 范围变量将自动播放属性添加到视频标签。

我在整个互联网上搜索，但找不到我想要的确切片段。

我尝试关注，但它们都不起作用。

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

请您参考如下方法:

一种简单的解决方案是使用 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 的情况下生成属性。