用javascript给子节点添加angular属性

adding angular attributes to child nodes with javascript

本文关键字：angular 属性 添加 子节点 javascript      更新时间：2023-09-26

我有这段代码

<div id="colors">
    <div id="red" >Red</div>
    <div id="green" >Green</div>
    <div id="blue" >Blue</div>
    <div id="purple" >Purple</div>
    <div id="gray" >Dark Slate Gray</div>
    <div id="olive" >Olive</div>
</div>

和我想添加angular.js属性的每一个子，使其"角兼容"。现在，我知道我必须做一些像

这样的事情
for (i in document.getElementById("colors").childNodes.length){
    document.getElementById("colors").childNodes[i];
}

但是我不知道怎么做最后一部分，实际上是添加新属性，比如

document.getElementById("colors").childNodes[i].attribute('data:ng-hide', 'hidden');

感谢

更新

我是angular.js新手

这是整个代码

html文件

<script src="js/angular.min.js"></script>
<script src="js/sockModule.js"></script>
<body ng-controller="myProductDetailCtrl">
    <button ng-click="showHideColors()" type="button">
        {{isHidden ? 'Show Available Colors' : 'Hide Available Colors'}}
    </button>
    <div id="red" ng-hide="isHidden">Red</div>
    <div id="green" ng-hide="isHidden">Green</div>
    <div id="blue" ng-hide="isHidden">Blue</div>
    <div id="purple" ng-hide="isHidden">Purple</div>
    <div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
    <div id="olive" ng-hide="isHidden">Olive</div>
</body>

和sockModule.js文件

var sockModule = angular.module('sockModule', []);
sockModule.controller('myProductDetailCtrl', function ($scope) {
        $scope.isHidden = true;
        $scope.showHideColors = function () {
            $scope.isHidden = !$scope.isHidden;//
        }
    }
);

我要做的是替换这里重复的ng-hide="isHidden": 

<div id="red" ng-hide="isHidden">Red</div>
<div id="green" ng-hide="isHidden">Green</div>
<div id="blue" ng-hide="isHidden">Blue</div>
<div id="purple" ng-hide="isHidden">Purple</div>
<div id="gray" ng-hide="isHidden">Dark Slate Gray</div>
<div id="olive" ng-hide="isHidden">Olive</div>

用一些更快/更聪明的东西，比如:

    <div id="colors">
        <div id="red" >Red</div>
        <div id="green" >Green</div>
        <div id="blue" >Blue</div>
        <div id="purple" >Purple</div>
        <div id="gray" >Dark Slate Gray</div>
        <div id="olive" >Olive</div>
    </div>
document.getElementById("colors").childNodes[i].setAttribute('ng-hide','isHidden');

如果你使用angular或javascript并不重要，但请分析，因为我是一个新手。由于

使用ng-repeat如何?比如:

<div id="color.id" ng-repeat="color in colors" ng-hide="color.hide">{{ color.name }}</div>

你的模型看起来像:

$scope.colors = [
            { id: 'red', name: 'Red', hide: true },
            { id: 'green', name: 'Green', hide: true },
            ...
        ];

这取决于你所说的"与angular兼容"是什么意思。如果您正在使用该框架，那么为什么不完全利用它的MVC模式呢?

这将工作(它很简单)

    var colors = document.getElementById("colors").children;
    Array.prototype.forEach.call(colors,function (color, i, a) {
        color.setAttribute('data:ng-hide', 'hidden');
    })
相关文章：