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)}"

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

我尝试做范围。$ 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

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

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 2

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 3

关于angularjs的数据绑定是一个非常简单的问题，请参考我的另一个answer and explanation

您只需使用obj.images绑定图像数据，但不能直接使用图像。

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

3 个答案: