Question

所以我正在研究AngularJS中的多步向导。它看起来像这样。

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

如果state.current.name与州名匹配，我试图给每个州一个活动类。

这是我的代码：

Html进度向导state1

<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>

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

Stateprovider

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>

当前状态为li或active

时，第一个phones元素将为devices类

Angular - ng-class - 进度条向导

1 个答案: