ng-класс не оценивается как истинный

У меня есть html, с которым я пытаюсь использовать ng-класс. Если я просто жестко закодирую «true», мой CSS для класса применяется, как и ожидалось. Но как только я заменяю true выражением (показано ниже), кажется, что мой класс не применяется. Вот строка HTML:

<li ng-repeat="menuItem in menuItems"><span ng-class="{active: $index==activeIndex}" class="underline"><a ng-href={{menuItem.itemLink}}>{{menuItem.itemName}}</a></span></li>

И код от контроллера:

      $scope.$on('$routeChangeSuccess', function(index){
        $scope.activeIndex = index;
        console.log("Set Active Index");
      });

angularjs ng-class
person gfree    schedule 02.06.2014    source источник
comment
$index — это смещение итератора, заданное для области действия каждого экземпляра шаблона директивой ng-repeat. Выражение выглядит нормально. Однако чего вы пытаетесь достичь, привязываясь к событию $routeChangeSuccess? То, что вы возвращаете как index здесь, является следующим маршрутом.   -  person adamK    schedule 02.06.2014
comment
Спасибо большое. Я не мог понять, почему индекс не был числовым при просмотре консоли в Chrome. Это связано с моими ограниченными знаниями JS, так как я все еще учусь на опыте работы с другим программным обеспечением. Теперь, когда вы упомянули об этом, это имеет смысл.   -  person gfree    schedule 02.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, что параметр индекса обратного вызова события $ routeChangeSuccess не является числом, как вы ожидали. Если вы хотите изменить свой список активных действий при изменении маршрута. вы можете передать службу $location в $scope.

вот пример: http://jsfiddle.net/yRHwm/4/

HTML-код:

<div ng-app="myapp">
    <div class="container" ng-controller="MyCtrl">
        <li ng-repeat="menuItem in menuItems">
            <!-- use $location.path() to detect current path -->
            <span ng-class="{'active': menuItem.itemLink==$location.path()}" class="underline">
                <a ng-href="#{{menuItem.itemLink}}">{{menuItem.itemName}}</a>
            </span>
        </li>
    </div>
    <div ng-view></div>
</div>

Javascript-код:

angular.module('myapp', ['ngRoute'])
.config(function($routeProvider){
    $routeProvider
    .when('/1', {controller:'firstController'})
    .when('/2', {controller:'secondController'})
})
.controller('MyCtrl', function($scope, $location) {
    $scope.menuItems = [
        {itemLink: '/1', itemName: 'Link1'},
        {itemLink: '/2', itemName: 'Link2'}
    ];

    // pass $location service to scope, then you can use $location.path() to detect current path
    $scope.$location = $location;

    // this is no longer used. just to show index is not a number
    $scope.$on('$routeChangeSuccess', function(index){
        $scope.activeIndex = index;
        // you can see in the console which index is not a number.
        console.log("Set Active Index", index);
    });
})
.controller('firstController', function($scope){
    console.log('first');
})
.controller('secondController', function($scope){
   console.log('second');
});
person Bob Yuan    schedule 02.06.2014