Question

所以，我有这个控制器

$rootScope.nhCount = 0;                

angular.forEach(data, function(value, key) {
      $rootScope.nhCount = $rootScope.nhCount + 1;
});

我的html尝试使用ng-class-odd和ng-class-even这样

<ul ng-class-odd="'timeline-inverted'" ng-class-even="'timeline'" >
            <li ng-repeat="nhCount in nhCount.data| orderBy:'date':true">

我使用了here找到的css。

根据ng-class-even / ng-class-odd，它应该将每个其他内容块放在屏幕的右侧或左侧。它不起作用。即使我移动ng-class-odd="'timeline-inverted'" ng-class-even="'timeline'"内的<li>仍然无效。

我怎样才能做到这一点？我在这里错过了什么？

由于

Answer 1

ngClassOdd和ngClassEven指令只能在ngRepeat的范围内应用。

所以你必须写下这样的东西：

<li ng-repeat="item in items">
   <span ng-class-odd="'timeline-inverted'" ng-class-even="'timeline'">
     {{name}}
   </span>
</li>

此外，我不是Angular专家，但你的ng-repeat看起来有些不对劲，连续2个冒号看起来并不合适; orderBy:'date':true

Answer 2

我认为OrderBy过滤器搞乱了各自的ng-class-odd / ng-class-even

使用跟踪

<li ng-repeat="nhCount in nhCount.data| orderBy:'date':true track by $index">

Answer 3

使用$ even和$ odd变量

＆＃13;

Grid grid = new Grid();
grid.setSizeFull();
grid.setEditorEnabled(true);
BeanItemContainer<MyBean> container = new BeanItemContainer<>(MyBean.class);
container.addBean(new MyBean());
grid.setContainerDataSource(container);

＆＃13;

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
    
   $scope.items = [1,2,3,4,5];
  
  });

＆＃13;

.timeline{
  background-color: yellow;
  color : red;
  }
.timeline-inverted{
  background-color: green;
  color : red;
  }

＆＃13;

ng-class-odd工作不正常

3 个答案: