角度确定基于条件的样式

时间:2018-03-27 13:26:27

标签: html angularjs

如果#0093ff;是下一个即将到来的假期,我正在尝试将表格的行更改为Holidays.HolidayDate

新代码:

<table ng-if="model.Holidays" class="table">
                        <tr>
                            <th>Holiday</th>
                            <th>Date</th>
                            <th>Branch</th>
                            <th>Hours</th>
                        </tr>
                        <tr ng-repeat="Holidays in model.Holidays" ng-style="isUpcomingHoliday(Holidays.HolidayDate) ? 'color:#0093ff' : '' ">
                            <td>{{Holidays.HolidayName}}</td>
                            <td>{{Holidays.HolidayDate | fulldaydate}}</td>
                            <td>{{Holidays.Branch ? Holidays.Branch : 'All'}}</td>
                            <td>{{Holidays.Hours ? Holidays.Hours : 'Closed'}}</td>
                        </tr>
                    </table>

JS

.filter('isUpcomingHoliday', ['$filter',
    function ($filter) {
        return function (input) {
            const sortedHolidays = this.model.Holidays.sort((a, b) => {
                return moment(b.date).isAfter(moment(a.date))
            });

            const upcomingHoliday = sortedHolidays[0];

            return moment(holidayDate).isSame(upcomingHoliday);
        };
    }])

2 个答案:

答案 0 :(得分:1)

您可以通过对假期进行排序并与第一个元素进行比较来实现。我认为它看起来像这样:

isUpcomingHoliday(holidayDate) {
  const sortedHolidays = this.model.Holidays.sort((a, b) => {
                           return new Date(b.HolidayDate) - new Date(a.HolidayDate)  
                         };

  return holidayDate.getTime() === sortedHolidays[0].getTime();
}
<section class="module module-divider-bottom" data-app="global">
            <div class="container" ng-controller="ContactController">
                <div class="container">
                    <table ng-if="model.Holidays" class="table">
                        <tr>
                            <th>Holiday</th>
                            <th>Date</th>
                            <th>Branch</th>
                            <th>Hours</th>
                        </tr>
                        <tr ng-repeat="Holidays in model.Holidays" ng-style="isUpcomingHoliday(Holidays.HolidayDate) ? 'background-color:#0093ff' : '' ">
                            <td>{{Holidays.HolidayName}}</td>
                            <td>{{Holidays.HolidayDate | fulldaydate}}</td>
                            <td>{{Holidays.Branch ? Holidays.Branch : 'All'}}</td>
                            <td>{{Holidays.Hours ? Holidays.Hours : 'Closed'}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </section>

moment.js可能更好,更具可读性:

isUpcomingHoliday(holidayDate) {
  const sortedHolidays = this.model.Holidays.sort((a, b) => {
                           return moment(b.date).isAfter(moment(a.date)) 
                         };
  const upcomingHoliday = sortedHolidays[0];  

  return moment(holidayDate).isSame(upcomingHoliday);
}

答案 1 :(得分:0)

这样的事情应该可以解决问题。我不知道你是否已经有一个api告诉你下一个假期,如果你正在用时间来检查日期是否相同(或者你是否已经有比较日期的东西)。 我选择了类vs ngStyle,因为您可能希望设置与该假日相关的其他内容。希望有所帮助。

isNextHoliday (holidayDate): boolean {
 // return some function that compares the two dates
}
.some-color {
  background: red;
}
<section class="module module-divider-bottom" data-app="global">
  <div class="container" ng-controller="ContactController">
    <div class="container">
      <table ng-if="model.Holidays" class="table">
        <tr>
          <th>Holiday</th>
          <th>Date</th>
          <th>Branch</th>
          <th>Hours</th>
        </tr>
        <tr ng-repeat="Holidays in model.Holidays">
          <td>{{Holidays.HolidayName}}</td>
          <td [class.some-color]="isNextHoliday(Holidays.HolidayDate)">{{Holidays.HolidayDate | fulldaydate}}</td>
          <td>{{Holidays.Branch ? Holidays.Branch : 'All'}}</td>
          <td>{{Holidays.Hours ? Holidays.Hours : 'Closed'}}</td>
        </tr>
      </table>
    </div>
  </div>
</section>