Question

我正在尝试使用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方法的原因，但这只是一个猜测。

Answer 1

请勿在控制器中使用DOM搜索代码。错误的原因很可能是首先需要创建摘要元素的摘要周期

您可以使用{{x.name[0]}}

在视图中直接设置此属性

<li class="deskElem" data-letters="{{x.name[0]}}" data-ng-repeat="x in storage | orderBy: '-name' ">

Answer 2

您不是在做有角度的方式。

模型应紧密绑定到视图中的html圆顶节点。当您更新模型或视图时，另一个将反过来更新。阅读有关Angular 2way绑定的信息同样，您是否定义了 ng-app ？样板代码如下所示

<div ng-app="myApp" ng-controller="myCtrl">
<article id="desktop">
    <h3>Dein Desktop: </h3>
    <ul>
        <li class="deskElem" data-ng-repeat="x in storage | orderBy: '-name' ">
            {{x.name}}
        </li>
    </ul>
</article>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $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;
    });
});

即使已填充，元素的长度也为零

2 个答案: