使用javascript向子节点添加角度属性
[英]adding angular attributes to child nodes with javascript
问题描述
I have this snipet
我有这个 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>
and I would like to add angular.js attributes to each child, to make it "angular compatible".我想为每个孩子添加angular.js属性，使其“角度兼容”。 Now, I know I have to do something like现在，我知道我必须做类似的事情
for (i in document.getElementById("colors").childNodes.length){
document.getElementById("colors").childNodes[i];
}
But I dont know how to do the final part, actually add the new attribute, something like但我不知道如何做最后的部分，实际上添加新属性，例如
document.getElementById("colors").childNodes[i].attribute('data:ng-hide', 'hidden');
Thanks谢谢
UPDATE更新
I am a angular.js newbie我是angular.js新手
This is the whole code这是整个代码
html file 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>
and the sockModule.js file和sockModule.js文件
var sockModule = angular.module('sockModule', []);
sockModule.controller('myProductDetailCtrl', function ($scope) {
$scope.isHidden = true;
$scope.showHideColors = function () {
$scope.isHidden = !$scope.isHidden;//
}
}
);
What I want to do is replace the repeating ng-hide="isHidden" here :我想要做的是在这里替换重复的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>
with something faster/smarter like:使用更快/更智能的东西，例如：
<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');
It does not matter if you use angular or javascript, but please be analytical, because I am a newbie.使用 angular 还是 javascript 都没有关系，但请分析一下，因为我是新手。 Thanks谢谢
2 个解决方案
解决方案1
1 2015-07-31 16:01:34
How about using ng-repeat? 如何使用ng-repeat？ Something like: 就像是：
<div id="color.id" ng-repeat="color in colors" ng-hide="color.hide">{{ color.name }}</div>
And your model would look something like: 您的模型将类似于：
$scope.colors = [
{ id: 'red', name: 'Red', hide: true },
{ id: 'green', name: 'Green', hide: true },
...
];
It just depends on what you mean by making it "angular compatible". 使其与“角度兼容”仅取决于您的意思。 If you're using the framework, then why not completely leverage its MVC pattern? 如果您使用的是框架，那为什么不完全利用其MVC模式呢？
解决方案2
0 2015-07-31 16:38:13
This will work (and it's simple) 这将起作用（而且很简单）
var colors = document.getElementById("colors").children;
Array.prototype.forEach.call(colors,function (color, i, a) {
color.setAttribute('data:ng-hide', 'hidden');
})
解决方案3
-1 2015-07-31 16:32:34
Used setAttribute method of JavaScript.... JavaScript的setAttribute方法。
Your Template File... 您的模板文件...
<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>
Your Script File 您的脚本文件
<script>
var child_node=document.getElementById("colors").childNodes;
for (i in child_node.length){
child_node[i].setAttribute('display', 'none');
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.