根据角度的路径变化添加或删除类

Question

我有3条路线包含3种形式我试图在当前选项卡上根据当前路径设置自举活动类.我使用了角度路由模块.我怎样才能做到这一点.我附上js代码,请检查并帮助

            angular.module('bankAppOnline',     ['ngSanitize','ngRoute','ngAnimate','ngQuantum'])
                .config(['$routeProvider',
                    function($routeProvider) {
                        $routeProvider.
                        when('/firststep', {
                            templateUrl: 'templates/firstformtemplate.html',
                            controller: 'firstformCtrl',
                            containerClass: 'active'

                        }).
                        when('/secondstep', {
                            templateUrl: 'templates/secondformtemplate.html',
                            controller: 'secondformCtrl',
                            containerClass: 'active'


                        }).
                        when('/thirdstep', {
                            templateUrl: 'templates/thirdformtemplate.html',
                            controller: 'thirdformCtrl',
                            containerClass: 'active'

                        }).
                        otherwise({
                            redirectTo: '/firststep'
                        });
                    }])
               .run(function($rootScope){

                $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
                    console.log(event);
                    console.log(toState);
                    console.log(fromState);
                    console.log(toParams);
                    $rootScope.containerClass = toState.containerClass;
                });

            })
                .controller('Main-Ctrl',function($scope)
            {
                $scope.containerClass =  "active";
            })
                .controller('firstformCtrl', function ($scope, Customer) {

                   $scope.cities = ['Hyderabad','Vizag','Vijayawada','Bangalore','Delhi','Mumbai','Chennai','Noida','Pune','Tirupathi'];
                   $scope.professions = ['Doctor','Teacher','Engineer','Lawyer'];
                   $scope.customer = Customer.get();
                 $scope.reset = function() {


                    $scope.firstform.$setPristine();
                       var restore = {
                        "firstname": "",
                        "lastname": "",
                        "age": "",
                        "city": "",
                        "profession": "",
                        "mobile": ""
                    };
                    angular.extend($scope.customer, restore);

                }  
              })
              .controller('secondformCtrl', function ($scope, Customer) {
                  $scope.designations = ['ChairmanVice Chairman',
            'Chairman cum Managing Director',
            'Managing Director',
            'Sr. Vice president',
            'Vice President',
            'General Manager',
            'Joint General Manager',
            'Deputy General Manager',
            'Asst. General Manager',
            'Chief Manager',
            'Sr. Manager',
            'Manager',
            'Joint Manager',
            'Deputy Manager',
            'Asst. Manager',
            'Sr. Officer',
            'Officer',
            'Jr. Officer',
            'Sr. Associate',
            'Associate',
            'Jr. Associate',
            'Assistant' ];
                $scope.customer = Customer.get();
                 $scope.reset = function() {

                    $scope.secondform.$setPristine();
                         var restore = {
                        "pan":"",
                         "income":"",   
                         "company":"",
                         "designation":"",
                         "address":"",
                         "pin":""
                    };
                    angular.extend($scope.customer, restore);

                }  
              })
                .controller('thirdformCtrl', function ($scope,$http,Customer,$alert) {

                $scope.accounts = ['Savings','Basic checking','Interest-bearing','Market-Deposits','Certificates of deposit'];
                $scope.customer = Customer.get();
                  $scope.reset = function() {
                    $scope.thirdform.$setPristine();
                       var restore = {
                       "accountType":"" ,
                 "fdCheck":false,
                 "creditcardCheck":false
                    };
                    angular.extend($scope.customer, restore);

                };
                    $scope.sendPost = function() {
                       var data =  $scope.customer;
                        console.log($scope.customer);
                        $http.post("/users", data).success(function(data, status) {
                            $scope.status = status;

                                $alert('form saved successfully.','Oley!', 'success', 'top-right');

                            console.log($scope.status);
                        })
                            .error(function(response, status){
                                //$alert(options)
                                //for using more option create object
                                $alert({title:'Error', content:'An error occured',placement:'top-right',alertType:'danger'});
                            })
                    };

                })
              .factory('Customer', function () {
                var customer = {
                    "firstname": "",
                    "lastname": "",
                    "age": "",
                    "city": "",
                    "profession": "",
                    "mobile": "",
                    "accountType": "",
                    "fdCheck": false,
                    "creditcardCheck": false,
                    "pan": "",
                    "income": "",
                    "company": "",
                    "designation": "",
                    "address": "",
                    "pin": ""
                };

                return {
                  get: function () {
                    return customer;
                  }
                }
              });

Answer 1

这可以使用ng-class来实现.只需在控制器中使用$ location即可.这个例子很简单.这里我们在$ location.path()等于'/'时为div添加一个活动类.

然后我们在视图中设置一个条件ng-class来添加活动类.

视图

<div ng-class="{active: location === '/'}">
  <p>The parent DIV will have active class added when location path equals '/'</p>
</div>

调节器

.controller('MainCtrl', function ($scope, $rootScope, $location) {
    $scope.location = $location.path();
    $rootScope.$on('$routeChangeSuccess', function() {
        $scope.location = $location.path();
    });
});