Angular - ng-class - 进度条向导

Question

所以我正在 AngularJS 中开发一个多步骤向导。它看起来像这样。

我正在使用角度 ui-router，我有 3 个状态，所以当我处于状态 1 时，我希望步骤 1 处于活动状态，如果 state2 则 step1 和 step2 都应该处于活动状态。

如果 state.current.name 与状态名称匹配，我尝试为每个状态赋予一个 active 类。

这是我的代码：

HTML进度向导状态1

<ul class="progress--bar">
    <li ng-class="{'active' : state.current.name === 'phones'}">Step1</li>
    <li>Step2</li>
    <li>Step3</li>
    <li>Step4</li>
</ul>

Html 进度向导 state2

<ul class="progress--bar">
    <li ng-class="{'active' : state.current.name === 'phones' || state.current.name === 'devices'}">Step1</li>
    <li ng-class="{'active' : state.current.name === 'devices'}">Step2</li>
    <li>Step3</li>
    <li>Step4</li>
</ul>

这可行，但必须有更好的方法吗？

状态提供者

app.config(['$urlRouterProvider', '$stateProvider','$httpProvider', 
    function($urlRouterProvider, $stateProvider, $httpProvider) {

    $urlRouterProvider.otherwise('/phones');

    $stateProvider
        .state('phones', {
            url: '/phones',
            cache: false,
            templateUrl: '/frontstart/studentfix/angular/templates/phones-tpl.html',
            controller: 'phonesCtrl'
        })
            .state('devices', {
                url: '/phones/devices/:phonesId',
                cache: false,
                templateUrl: '/frontstart/studentfix/angular/templates/device-tpl.html',
                controller: 'deviceCtrl'
            })
                .state('details', {
                    url: '/phones/devices/details/:id',
                    cache: false,
                    templateUrl: '/frontstart/studentfix/angular/templates/device-detail-tpl.html',
                    controller: 'deviceDetailCtrl'
                });

}]);

控制器

app.controller('phonesCtrl', ['$scope','$rootScope', '$state','$stateParams','PhonesResource', 
    function($scope, $rootScope, $state, $stateParams, PhonesResource){

    $rootScope.state  = $state;

    $scope.phoneCompanies         =   PhonesResource.all();

    $scope.selectDevice   =   function (id) {
        $state.go('devices', { phonesId: id });
    };

}]);

app.controller('deviceCtrl', ['$scope','$state','$stateParams','PhonesResource', '$rootScope', 
    function($scope, $state, $stateParams, PhonesResource, $rootScope){

    $scope.phoneCompanies = PhonesResource.all();

    $scope.phoneCompanies = PhonesResource.get($stateParams.phonesId);

    $scope.showDetails = function (selectedPhone) {
        $rootScope.selectedPhone = selectedPhone;
        $state.go('details',{id: selectedPhone.id});
    };
}]);

app.controller('deviceDetailCtrl', ['$scope','$state','$stateParams','PhonesResource', '$rootScope',
    function($scope, $state, $stateParams, PhonesResource, $rootScope){
        // console.info('$rootScope.selectedPhone',$rootScope.selectedPhone);
        if(!$rootScope.selectedPhone){
            $rootScope.selectedPhone = PhonesResource.getPhone($stateParams.id);
        }
        // console.info('$rootScope.selectedPhone',$rootScope.selectedPhone);
        $scope.selectedPhone = $rootScope.selectedPhone;

}]);

如有任何帮助，将不胜感激。

谢谢！

Answer 1

您是否尝试过这样做：

<ul class="progress--bar">
   <li ng-class="{'active' : state.current.name === 'phones' || state.current.name === 'devices'}">Step1</li>
   <li ng-class="{'active' : state.current.name === 'devices'}">Step2</li>
   <li>Step3</li>
   <li>Step4</li>

当当前状态为phones 或devices 时，第一个li 元素将具有active 类