предоставление другой цветовой схемы (нечетное / четное) для строк в строках в сетке пользовательского интерфейса с использованием Angular JS

Question

предоставление другой цветовой схемы (нечетное / четное) для строк в строках в сетке пользовательского интерфейса с использованием Angular JS

0

Я пытаюсь разделить строку на два, т.е. Диапазон строк в Угловой JS UI Grid. Я не могу найти, как это сделать. Мне нужны разные цветовые схемы для строк в строках сетки пользовательского интерфейса. Код Plunker: http://plnkr.co/edit/c65CZm19bGJbWfZT15u6?p=preview

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions = {
        rowHeight:50,
        columnDefs: [
          { field: 'name' },
          { field: 'phoneList', name: 'Phone Numbers', cellTemplate:'<div ng-repeat="item in row.entity[col.field]">{{item}}</div>'}
        ],
         enableColumnResizing: true
      };

      $http.get('data.json')
      .success(function (data) {
        $scope.gridOptions.data = data;
      });

}]);

Ananddon 31 май 2016, в 14:43

Источник

0

Здесь вы с тем же вопросом в другом формате. Значит, имя будет красным, а номера телефонов разделены на зеленые строки?
thepio 31 май 2016, в 11:52
0

да. Во 2-м столбце цветовые схемы должны быть разными (строки в ряду). Строки в строке должны иметь другой цвет фона. @thepio
Ananddon 31 май 2016, в 11:55

Теги:

angularjs

css

angular-ui-bootstrap

angular-ui-grid

1 ответ

Ещё вопросы

Здесь вы с тем же вопросом в другом формате. Значит, имя будет красным, а номера телефонов разделены на зеленые строки?
да. Во 2-м столбце цветовые схемы должны быть разными (строки в ряду). Строки в строке должны иметь другой цвет фона. @thepio

thepio · Accepted Answer · 2016-05-31T10-07-00.000Z

Вы можете использовать селектор :nth-child css с even и odd:

.phonenumber:nth-child(even) {
  background: red
}

.phonenumber:nth-child(odd) {
  background: green 
}

Я также добавил класс phonenumber в ваш шаблон:

cellTemplate:'<div class="phonenumber" ng-repeat="item in row.entity[col.field]">{{item}}</div>'

Plunker: http://plnkr.co/edit/CozqxvfmkhDzBBEeHcJ0?p=preview

Извините за то, что вы подчеркнули решение с такими цветами, но по крайней мере ясно, что происходит в этом направлении.