Dynamiczne przydzielanie klas do ng-powtórzeń z opcją wyboru ng - javascript, angularjs, angularjs-ng-repeat, ng-options

Mam wybór, który używa opcji ng.Wybrana wartość wypełnia listę powtórzeń ng za pomocą filtra. Teraz muszę dodać klasę do niektórych elementów listy ng-repeat. Mam "id" elementów listy, do których ma zostać dodana klasa, w tablicy.

Kod 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";
}
}

}]);

Przykład tablicy danych

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

Scope.carArray przykład danych

["2","3"]

Kiedy wybieram inną lokalizację z wybierz za pomocąng-options mój js powinien dodać klasę „selected” do elementów li, które mają swoje identyfikatory w scope.carArray. Czasami działa, ale w większości się zawiesza. Jakie błędy tutaj popełniłem?

Odpowiedzi:

Zamiast ręcznie dodawać nazwę klasy przez JavaScript, użyj Angulara ngClass dyrektywa.

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