Question

我在数组名称中有一些数据，其中包含 $ scope.data 变量。

[
 {date:'02-05-2016'},
 {date:'02-05-2016'},
 {date:'04-05-2016'},
 {date:'04-05-2016'},
 {date:'05-05-2016'},
 {date:'05-05-2016'},
 ...
 ...
]

我有2个css类（color1，color2）。我想在每个日期组的ng-repeat中添加类，如

02-05-2016 => color1
04-05-2016 => color2
05-05-2016 => color1
...
...

我无法弄清楚 ng-repeat

中的情况

Answer 1

Example here。最简单的，你可以做到这一点。

<ul>
  <li ng-class="{
  'color1':datum.date === '02-05-2016' || datum.date === '05-05-2016',
  'color2':datum.date === '04-05-2016'
  }"
  ng-repeat="datum in data">{{datum.date}}</li>
</ul>

如果你想要更具扩展性的东西，你可以使用一个函数来检查（example here）

在您看来：

<ul>
  <li ng-class="check(datum.date)" ng-repeat="datum in data">{{datum.date}}</li>
</ul>

在您的控制器中：

$scope.check = function(date) {
  if (date === '02-05-2016' || date === '05-05-2016') return 'color1';
  return 'color2';
}

Answer 2

使用ng-style的简单而不同的方法只是创建一个对象

$scope.colors = {
    "02-05-2016": "{'background-color':'blue'}",
    "04-05-2016": "{'background-color':'red'}",
    "05-05-2016": "{'background-color':'green'}"
  };

并访问ng-style

中的颜色

更新

使用ng-class，因为你想要应用颜色1，颜色2颜色1 ......等等，你可以这样做。这里$even and $odd来自ng-repeat

<p ng-class="{'color1':$odd , 'color2':$even}">{{x.date}}</p>

＆＃13;

var app = angular.module("app", []);
app.controller('Ctrl', function($scope) {

  $scope.data = [{
    date: '02-05-2016'
  }, {
    date: '02-05-2016'
  }, {
    date: '04-05-2016'
  }, {
    date: '04-05-2016'
  }, {
    date: '05-05-2016'
  }, {
    date: '05-05-2016'
  }, ];

  $scope.colors = {
    "02-05-2016": "{'background-color':'blue'}",
    "04-05-2016": "{'background-color':'red'}",
    "05-05-2016": "{'background-color':'green'}"
  };
});

＆＃13;

.color1 {
  background-color:red;
 
}
.color2 {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">

  <div ng-repeat="x in data track by $index">

    <!--<p ng-style="{{colors[x.date]}}">{{x.date}}</p> -->
    
    <p ng-class="{'color1':$odd , 'color2':$even}">{{x.date}}</p>
  </div>

</div>

＆＃13;

Answer 3

如果你确实有日期和颜色之间的映射，那将非常简单。

以下是您可以做的事情：

＆＃13;

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
function($scope) {
  $scope.dates = [{
    date: '02-05-2016'
  }, {
    date: '02-05-2016'
  }, {
    date: '04-05-2016'
  }, {
    date: '04-05-2016'
  }, {
    date: '05-05-2016'
  }, {
    date: '05-05-2016'
  }];


}
}]);

＆＃13;

.color1 {
  background-color: #121212;
  color: white;
}
.color2 {
  background-color: #ababab;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div ng-repeat="dateObj in dates">
      <div ng-class-odd="'color1'" ng-class-even="'color2'">
        {{dateObj.date}}
      </div>
    </div>
  </div>
</div>

＆＃13;

如果您正在考虑使用相同颜色对日期进行分组，那么您可以执行以下操作。

以下是一个例子：

＆＃13;

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.dates = [{
      date: '02-05-2016'
    }, {
      date: '02-05-2016'
    }, {
      date: '03-05-2016'
    }, {
      date: '04-05-2016'
    }, {
      date: '04-05-2016'
    }, {
      date: '05-05-2016'
    }, {
      date: '06-05-2016'
    }, {
      date: '07-05-2016'
    }, {
      date: '08-05-2016'
    }, {
      date: '09-05-2016'
    }];


    let currentColor = "color1";
    if ($scope.dates.length > 0) {
      $scope.dates[0].color = currentColor;
    }

    $scope.dates.reduce((prevObj, currentObj) => {
      if (prevObj.date !== currentObj.date) {
        currentColor = currentColor === 'color1' ? 'color2' : 'color1';
      }
      currentObj.color = currentColor;
      return currentObj;
    });

  }
]);

＆＃13;

.color1 {
  background-color: #121212;
  color: white;
}
.color2 {
  background-color: #ababab;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div ng-repeat="dateObj in dates track by $index">
      <div ng-class="dateObj.color">
        {{dateObj.date}}
      </div>
    </div>

  </div>
</div>

＆＃13;

ng-class根据组日期数据添加

3 个答案: