使用 ng-options 将类动态分配给 ng-repeat 项目答案

【问题标题】：Dynamically allocating class to ng-repeat items with ng-options select使用 ng-options 将类动态分配给 ng-repeat 项目
【发布时间】：2016-07-26 16:28:39
【问题描述】：

我有一个使用 ng-options 的选择。此选定值使用过滤器填充 ng-repeat 列表。现在我需要为一些 ng-repeat 列表项添加一个类。我在一个数组中有要添加类的列表元素的 'id'。

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>

<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 假设将类“selected”添加到 li 项中，它们的 id 在 scope.carArray 中。它有时有效，但大多数时候它会崩溃。我在这里犯了什么错误？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat ng-options

【解决方案1】：

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

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

【讨论】：