刷新 ng-repeat ng-class 条件删除元素

Question

我在我的布局中使用 bootstrap 的偏移量，并且有一个简单的条件将偏移量放置在每第 5 个元素上。

class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}"

我还制作了一个指令，在悬停时显示一个小红框，允许用户删除他们的元素。工作正常，除了布局不会刷新并且偏移量设置在错误的元素上，使布局变得一团糟。

我尝试执行 scope.$apply()，但这没有帮助。我怎样才能做到这一点？

我的html:

  <body  ng-controller="MyController">
    <div class="container">
    <div class="row">
      <div ng-repeat="image in images" 
           dg-deletable="" 
           class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
        <div class="imagebox">
          <div>{{image.name}}</div>
          <div class="imagecover"></div>
          <img width="140" src="{{image.file}}" />
        </div>
      </div>
    </div>
    </div>
  </body>

在我的指令中：

delete_btn.on('click', function(event) {
    scope.$apply(function() {  
        element.remove();
    });
});

http://plnkr.co/edit/2ADoSYwPuh46Zh5ylmjw?p=preview （您需要以全页模式查看）

Answer 1

ng-class 需要是它自己的 HTML 属性，像这样

<body  ng-controller="MyController">
    <div class="container">
    <div class="row">
      <div ng-repeat="image in images" 
           dg-deletable="" 
           class="col-md-2 col-sm-2 col-xs-5" ng-class="{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
        <div class="imagebox">
          <div>{{image.name}}</div>
          <div class="imagecover"></div>
          <img width="140" src="{{image.file}}" />
        </div>
      </div>
    </div>
    </div>
  </body>

Answer 2

你是对的@dgig。 !($index % 5) 工作正常。问题是您也应该从数组中删除图像。我已经更改了 plunker 我认为使用 angular 可以更好地编写代码。您可以使用 angular 指令来触发事件并设置样式 - sheet.

delete_btn.on('click', function(event) {
        scope.$apply(function() {  
            angular.forEach(scope.images, function(img){
              if(img.name == attr.imagename){
                scope.images.splice(scope.images.indexOf(img),1);  
              }
            });
            element.remove();
        });
    });

我将 imagename 设置为要在删除功能中使用的属性。

<body  ng-controller="MyController">
    <div class="container">
    <div class="row">
      <div ng-repeat="image in images" dg-deletable="" imagename={{image.name}}  class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' :  !($index % 5)}">
        <div class="imagebox">
          <div>{{image.name}}</div>
          <div class="imagecover"></div>
          <img width="140" src="{{image.file}}" />
        </div>
      </div>
    </div>
    </div>
  </body>

Answer 3

关于angularjs数据绑定的问题很简单，参考我的另一个

只需要使用obj.images绑定图片数据即可，不能直接使用图片

刷新 ng-repeat ng-class 条件删除元素

refresh ng-repeat ng-class conditional following removal of element

twitter-bootstrap

angularjs

angularjs-ng-repeat