使用 ng-options select 动态分配 class 到 ng-repeat 项目

Question

我有一个使用 ng-options 的 select。 selected 值使用过滤器填充一个 ng-repeat 列表。现在我需要将 class 添加到某些 ng-repeat 列表项中。我有列表元素的“id”，class 将被添加到一个数组中。

Html代码：

<select class="form-control" ng-options="car.BaseStation as car.BaseStation for car in UnUsedCars | unique: 'BaseStation' | orderBy:'BaseStation'" ng-model="selected.BaseStation" ng-change="locationChanged()">
    <option value="">All Locations</option>
</select>

<h3>Select Car</h3>
<ul class="cablist">
    <li ng-repeat="unUsedCar in UnUsedCars | filter: selected.BaseStation" id="{{unUsedCar.Id}}">
        <div class="cardetails">
            <h4>{{unUsedCar.CarType}}</h4>
        </div>
    </li>                        
</ul>

js

<script data-require="angular-ui@*" data-semver="0.4.0" src="http://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>

<script type="text/javascript">
    var carApp = angular.module('carApp', ['ui.directives','ui.filters']);

    carApp.controller('CarCtrl', ['$scope', function(scope) {

        scope.locationChanged = function() {
            arrayLength = scope.carArray.length; //scope.carArray is the array of li element Id on which class "selected" is to be added.
            for(i = 0; i < arrayLength; i++) {
                var carId = scope.carArray[i]; 
                document.getElementById(carId).className += " selected";
            }
        }      

    }]);

数据数组示例

[{
    "Id" : "1",
    "CarType" : "Audi",
    "BaseStation" : "Canada"
},
{
    "Id" : "2",
    "CarType" : "BMW",
    "BaseStation" : "U.S.A"
},
{
    "Id" : "3",
    "CarType" : "Benz",
    "BaseStation" : "Canada"
}]

scope.carArray数据示例

["2","3"]

当我使用 ng-options 从 select 中选择另一个位置时，我的 js 假设将 class "selected" 添加到 li 项目中，它们的 id 在 scope.carArray.它有时可以工作，但大多数时候会崩溃。我在这里犯了什么错误？

Answer 1

不要通过 javascript 手动添加类名，而是使用 Angular 的 ngClass 指令。

<li ng-repeat="unUsedCar in UnUsedCars | filter: selected.BaseStation" id="{{unUsedCar.Id}}" 
    ng-class="{selected: carArray.indexOf(unUsedCar.Id) > -1}">

使用 ng-options select 动态分配 class 到 ng-repeat 项目

Dynamically allocating class to ng-repeat items with ng-options select

javascript

angularjs

angularjs-ng-repeat

ng-options