Question

我有一个应用程序，我正在运行ng-repeat来显示信息。在进行Ajax调用之后，我需要在一些生成的元素中添加类。

我可以使用jQuery轻松完成此操作，但我试图坚持使用Angular / jqlite。

我遇到的问题是我可以获取该元素，但不能作为addClass处理的对象。

这是我到目前为止所得到的：

angular.forEach($(".tile"), function(tile){
    if(srv.free.indexOf(angular.element(tile.querySelector('.label')).text()) != -1){
       tile.addClass("free");
    }
});

数组srv.free包含一个名称列表，这些名称值与div的{{1}}的文本值相同，.label位于.tile内。因此，我需要遍历每个.tile，检查子.label的文本值，如果该文本值在数组srv.free中，请将类.free添加到{ {1}}。

我的观点是.tile是＆＃34;未定义＆＃34;因为此时addClass只是一个字符串，而不是jquery / jqlite对象。

如何向其添加类或获取对象版本？

更新

我以前尝试在元素上使用tile来更新类，但无法让它们更新。

我的服务中包含ng-class，最初设置为空白数组。在Ajax调用之后：

free

然后，在我的控制器中，我有：

$http.get('/json/free.json').success(function(data){
        srv.free = data;
});

并在我的ng-repeat中：

$scope.gsrv = globalService;

如果这不起作用，我尝试添加：

<div class="col-xs-3 col-md-2" ng-repeat="Tile in list.tiles">
        <div class="tile" id="{{$index}}" ng-class="{free:$.inArray(Tile.Name, gsrv.free)}" ng-click="main.changeView('/Tile/'+$index)">
        <img src="http://placehold.it/256" ng-src="{{Tile.Icon}}" ng-class="{dis:!Tile.Stats}">
        <div class="label">{{Tile.Name}}</div>
    </div>
</div>

没有任何改变。

Answer 1

您声明元素是以ng-repeat呈现的。因此，您可以使用ng-class directive基于某个变量添加类，如下所示：

<div ng-repeat="tile in tiles" 
     ng-class="{ free: tile.someVariable }"> // <-- adds a class 'free' when someVariable verifies to true
    <label>{{ tile.someVariable }}</label>
</div>

<强>更新

您可以在ajax调用后将这些变量添加到切片中：

$http.get('/json/free.json').success(function(data){
    setTilesFree(data);
});

var setTilesFree = function (free) {
    var tiles = $scope.list.tiles; // shortcut
    for (var i = 0; i < tiles.length; i++) {
        // If in 'free' array, set tile free = true
        // This will update the DOM from this tile, adding the class 'free'
        if (free.indexOf(tiles[i].Name) > -1) {
            tiles[i].free = true;
        } else {
            tiles[i].free = false;
        }
    }
}

然后在你看来：

<div ng-repeat="Tile in list.tiles">
    <div ng-class="{free: Tile.free}">
        <img src="http://placehold.it/256" ng-src="{{Tile.Icon}}" ng-class="{dis:!Tile.Stats}">
        <div class="label">{{Tile.Name}}</div>
    </div>
</div>

请参阅this jsfiddle

Answer 2

您可以从list和free服务返回空数组，并在以后填充它们。由于Angular在每$http.get后运行摘要周期，$scope将被正确更新，绑定将按预期工作。最棘手的是填充相同的现有数组（最初由服务返回）而不是每次都创建新数组。这是必需的，因为每次摘要运行时控制器功能都不会再次运行，因此新的数组实例不会分配给$scope。以下是可能的解决方案：

<强>的JavaScript

angular.module('app',[]).
    factory('list', ['$http', function($http) {
      var tiles = [];
      return {
        getList: function() {
          if(!tiles.length) {
            $http.get('data.json').then(function(res) {
              res.data.forEach(function(item) {
                tiles.push(item);
              });
            });
          }
          return {
            tiles: tiles
          };
        }
      }
    }]).
    factory('free', ['$http', function($http) {
      var free = [];
      return {
        getFree: function() {
          if(!free.length) {
            $http.get('free.json').then(function(res) {
              res.data.forEach(function(item) {
                free.push(item);
              });
            });
          }
          return free;
        }
      }
    }]).
    controller('ctrl', ['$scope', 'list', 'free', function($scope, list, free){
      $scope.list = list.getList();
      $scope.free = free.getFree();
    }]);

<强> HTML

<div class="col-xs-3 col-md-2" ng-repeat="Tile in list.tiles">
    <div class="tile" ng-class="{free: free.indexOf(Tile.Name) > -1}">
        <img ng-src="{{Tile.Icon}}" ng-class="{dis:!Tile.Stats}">
        <div class="label">{{Tile.Name}}</div>
    </div>
</div>

<强> Plunker

http://plnkr.co/edit/UEWnexi3wVU6eLN1BW2b?p=preview

更新

http://plnkr.co/edit/vOHkLyCHQFoWdqaix4pH?p=preview

（静态预先填充list的同一示例，以及service代替factory）

如何以编程方式检查元素并以角度添加类？

2 个答案: