Добавить цвет в div на основе динамических данных в ng-repeat - PullRequest
Новая
       14

Добавить цвет в div на основе динамических данных в ng-repeat

0 голосов
/ 19 июня 2019

Я пытаюсь сделать таблицу с тремя столбцами и количеством строк n.и у каждой альтернативной строки должен быть свой цвет фона.Данные у меня динамические.Я могу получить строки и столбцы, но не знаю, как сделать цвет фона.

Я пытался сделать это с DIV и т. Д. Таблицы, когда я делаю все это в одной строке.

model.names = ['a','b','c','s','s','ww','ee','rrgf','fdf','dfdf','dfdf','ffd'];

<div class="col-xs-12" data-ng-if="model.showlist==true">
<div class="col-xs-4 myClass" data-ng-repeat="x in model.names">
{{x}}
</div>
</div>

с этим кодом я получаю желаемую таблицу, но я не понимаю, как делать стилизацию.Я также пробовал это. 

<table><tr>
<td class="col-xs-4 myClass" data-ng-repeat="x in model.names">
{{x}} </td>
</tr></table>

ожидаемое значение o / p будет 

a b c (background color -grey)
a s ww
ee rrgf fdf (background color -grey)
dfdf dfdf ffd

Фактически это так при работе с DIV (формат правильный, но не знаю, как сделать цвет) 

a b c 
a s ww
ee rrgf fdf 
dfdf dfdf ffd

На самом деле это при работе с таблицей 

a b c a s ww ee rrgf fdf dfdf dfdf ffd

Ответы [ 3 ]

0 голосов
/ 19 июня 2019

Попробуйте это 

<div class="col-xs-4" ng-class='{"grey-color": ($index/3) % 2 < 1}' data-ng-repeat="x in model.names">
  {{x}}
</div>

CSS 

.grey-color {
    background-color: grey;
}
0 голосов
/ 24 июня 2019

Попробуйте это 

 '<table>
<tr>
<td data-ng-repeat="x in model.names" ng-class="{'grayColor': x.names == 'a' ||'grayColor': x.names == 'b' || 'grayColor': x.names == 'c'">
{{x}} 
</td>
</tr></table>'

css: - .grayColor{ background-color:gray}

0 голосов
/ 19 июня 2019

Это должно быть таким образом tr:nth-child(odd) {background: #CCC}, чтобы сделать вашу нечетную строку таблицы bg-color серой.

Для получения данных в каждой строке ng-repeat должно быть в tr

    <table>
      <tr data-ng-repeat="x in model.names">
        <td class="col-xs-4 myClass">
          {{x}} </td>
      </tr>
    </table>

CSS 

tr:nth-child(odd) {background: gray}

Ниже приведен рабочий фрагмент для того же 

(function() {
  angular.module("myApp", []).controller('test', ['$scope', function($scope) {
    $scope.rules = ['a', 'b', 'c', 's', 'ww', 'ee', 'rrgf', 'fdf', 'dfdf', 'ffd','ddw','qer'];
    const chunk =
      (size, xs) =>
      xs.reduce(
        (segments, _, index) =>
        index % size === 0 ?
        [...segments, xs.slice(index, index + size)] :
        segments, []
      );

    $scope.new = chunk(3, $scope.rules);
  }]);
}());
table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="test">
    <table>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </tr>
        <tr data-ng-repeat="x in new">
          <td>
            <h1>{{x[0]}}</h1>
          </td>
          <td>
            <h1>{{x[1]}}</h1>
          </td>
          <td>
            <h1>{{x[2]}}</h1>
          </td>
        </tr>
    </table>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...