get html elements in angularJS
Question
I am new in AngularJS world. I have a circumstance here.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr class="x" ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
];
var arrays = document.getElementsByClassName("x");
console.log(arrays.length);
});
</script>
I tried to get the array of html elements I did load by angularJS (using ng-repeat). When I logged the value of whole array, its results are correct. However when I logged the array.length or array[1], the results were 0 and undefined respectively. I tried to put these code in $scope.on('viewContentLoaded') to ensure that all html elements finished loading, but the results were the same. So what is my stupidity here?
Thank you.
**** Solution:
$timeout(function(){
var arrays = document.getElementsByClassName("x");
console.log(arrays.length);
});
Thanks to @Vladimir M
4 answers
solution1
1 ACCPTED 2016-09-18 16:31:04
One thing to remember, is that angular is doing certain things async. When meaning, that when you assign your records in your controller, angular will only start rendering after your controller method is completed. Hence, your request for elements of the document will return nothing.
One way to go around it in certain cases is to use $timeout service.
$timeout(function(){
var arrays = document.getElementsByClassName("x");
console.log(arrays.length);
});
The method within timeout should be executed when the angular digest cycle is done rendering.
solution2
0 2016-09-18 16:22:20
You need to wrap the code inside
angular.element(document).ready(function(){});
like this
angular.element(document).ready(function(){
var arrays = document.getElementsByClassName("x");
console.log(arrays[2]);
});
You can refer to the Demo
Also I tried your code with logging whole array or array.length but it was not working. Actually it will not work until DOM get rendered. So the above code will wait till document is ready, once document get rendered you can access html elements.
solution3
0 2016-09-18 16:22:31
Angular is an MVC framework. MVC stands for 'Model View Controller', meaning your application should be divided into 3 parts:
- The view (any directives in the html, for example ng-repeat).
- The controller (your app.controller, controls scope and )
- The model (in angular, service / factory), which stores business logic and functionality. for example, in your case, an angular factory might return an array of users (name, country), which your controller will pass into $scope, which will then be transferred to your view automatically.
just to point out, each of these (view, controller, model) go in a different file by convention.
another notable feature of angular, as you might know already, is two-way binding . this means that any change in the view is reflected in the model and controller and vice-verse. What that means for you is that your ng-repeat will always represent exactly what you have in $scope.records. just console log this.
angular sometimes works in mysterious ways and was not meant for you to use selectors on. it is never necessary using angular, which is another advantage of angular in general. no selectors!
solution4
0 2016-09-18 16:35:16
You are trying to get the li elements before they render. S0 as @DashingDev said, you need to move your block of code into angular.element(document).ready(function(){}); . Your code should be look
angular.element(document).ready(function(){
var multibutton = document.getElementsByClassName("x");
console.log(multibutton[0]);
});
Here is the Working fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.