javascript - 元素的长度为零,即使它已被填充
问题描述
我正在尝试使用 angularjs/js 设置数据属性。
<article id="desktop">
<h3>Dein Desktop: </h3>
<ul>
<li class="deskElem" data-ng-repeat="x in storage | orderBy: '-name' " >
{{x.name}}
</li>
</ul>
</article>
JS:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http, $window, $timeout){
//All Objects on Desktop
$scope.storage = [];
//Show Desktop
$http.get("/getDesktop").then(function(response){
for(var i = 0; i<response.data.length; i++){
$scope.storage[i] = {name: response.data[i]};
}
$scope.setLetter();
return;
});
$scope.setLetter = function(){
var elem = document.getElementsByClassName("deskElem");
console.log(elem);
for(var j=0; j< elem.length; j++){
elem[j].setAttribute('data-letters',
$scope.storage[j].name.charAt(0));
}
}
});
和 Java 控制器:
//Returns Desktop
@GetMapping("/getDesktop")
public ArrayList<String> getDesktop() throws Exception {
ArrayList<String> itemNames = new ArrayList<>();
if(kdxF.getUser() != null) {
itemNames = kdxF.showDesktop(); // Just returns an
ArrayList of strings
}else {
throw new Exception("Not logged in!");
}
return itemNames;
}
即使我的 console.log(elem) 显示元素,元素的长度也为零。也许这是 get 方法的原因,但这只是一个猜测。
解决方案
永远不要在控制器中使用 DOM 搜索代码。它出错的原因可能是首先创建这些元素需要消化周期
您可以使用在视图中设置此属性{{x.name[0]}}
<li class="deskElem" data-letters="{{x.name[0]}}" data-ng-repeat="x in storage | orderBy: '-name' ">
推荐阅读
- node.js - 如何在公共 IP 上部署节点角度应用程序?
- sql - 将两列数据合二为一
- regex - 用于匹配 angular2 中的 html 标签的正则表达式
- javascript - 从 txtfield 获取并连接到数据库以及 nodeJS
- javascript - How to concatenate string within class name syntax in JavaScript?
- postgresql - 为什么我的计划时间总是比执行时间慢?
- css - 产品卡不正确
- java - 看不懂这种java参考
- scala - 如何在 Cassandra Datastax 驱动程序中将 Java 集合转换为 Scala
- mysql - 从 hive 读取数据并将其显示在仪表板上