Question

我有这个snipet

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

如果你使用角度或javascript没关系，但请分析，因为我是新手。感谢

Answer 1

使用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 },
            ...
        ];

它取决于你的意思，使它与角度兼容＆＃34;。如果您正在使用该框架，那么为什么不完全利用其MVC模式呢？

Answer 2

这将有效（而且很简单）

    var colors = document.getElementById("colors").children;

    Array.prototype.forEach.call(colors,function (color, i, a) {
        color.setAttribute('data:ng-hide', 'hidden');

    })

Answer 3

使用JavaScript的setAttribute方法....

您的模板文件......

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

您的脚本文件

<script>
    var child_node=document.getElementById("colors").childNodes;
    for (i in child_node.length){
        child_node[i].setAttribute('display', 'none');
    }
</script>

使用javascript

3 个答案: