I just found this code snippet:
<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>
Now, I want to make it compatible with Angular.js by adding attributes to each child element. I know I have to iterate through them like this:
for (i in document.getElementById("colors").childNodes.length){
document.getElementById("colors").childNodes[i];
}
But I'm not sure how to add the new attribute. It should be something like:
document.getElementById("colors").childNodes[i].setAttribute('data:ng-hide', 'hidden');
I appreciate any help!
UPDATE
I'm still learning Angular.js
This is the complete code:
HTML file:
<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:
var sockModule = angular.module('sockModule', []);
sockModule.controller('myProductDetailCtrl', function ($scope) {
$scope.isHidden = true;
$scope.showHideColors = function () {
$scope.isHidden = !$scope.isHidden;//
}
}
);
I want to optimize the code by replacing repetitive ng-hide="isHidden" parts with a quicker and smarter solution like so:
<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');
You can use either Angular or JavaScript for the solution. Just please explain thoroughly as I am a beginner. Thank you!