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

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 class (color1,color2)。我想在每个日期组的 ng-repeat 中添加 class，例如

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 ....为了实现这个你可以像 below.Here 那样 $even and $odd 来自 ng-repeat

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

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

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

<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>

Answer 3

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

您可以执行以下操作：

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'
  }];


}
}]);

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

<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>

如果您希望用相同的颜色对日期进行分组，您可以这样做。

这是一个例子：

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

  }
]);

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

<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>

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

ng-class add depending on group date data

angularjs

ng-repeat

ng-class