Question

请参阅下面的我的插件。

https://plnkr.co/edit/jEe1PQMP8TLdeOetJ1Yk?p=preview

这是我的$ scope.possibleDates的样子

$scope.possibleDates = [  
   {  
      "projectedStartDate":"2016-12-07T00:00:00",
      "dateName":"December - Week 1",
      "allocated":20,
      "capacity":11
   },
   {  
      "projectedStartDate":"2016-12-14T00:00:00",
      "dateName":"December - Week 2",
      "allocated":20,
      "capacity":11
   },...]

以下是我的选择表格

<table class="table table-bordered table-hover">
    <thead>                 
        <tr>
            <th >List Of Dates</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="d in data">
            <td>
                <select class="form-control"
                    ng-model="d.projectedStart"
                    ng-options="dates.projectedStartDate as dates.dateName for dates in possibleDates">
                </select>
            </td>
        </tr>                                               
    </tbody>
</table>

我希望能够为下拉列表中的每个选项着色，具体取决于分配的＆＃39;大于＆＃39;容量＆＃39;或不。

我试过这个，但它不起作用。

ng-class="{overallocated: dates.allocated > dates.capacity, underallocated = dates.allocated > dates.capacity}"

Answer 1

试试这个：

 <select ng-model="d.projectedStart">
     <option ng-class="{overallocated: dates.capacity >dates.allocated, underallocated: dates.capacity <dates.allocated}" 
             ng-repeat="dates in possibleDates" >{{dates.dateName}}
     </option>
 </select>

AngularJS - 在选择的ngOptions上设置背景颜色

1 个答案: