Angularjs 根据角度中的管线更改添加或删除类

我有3条路线，包含3张表格 我试图根据angular中的当前路由在当前选项卡上设置引导活动类。我使用angular route模块。 我怎样才能做到这一点。 我附加的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;
                  }
                }
              });

---

既然你用angular ui router标记了你的问题，我想你正在使用它

将UI路由器UI sref与UI sref active结合使用，可以为当前活动状态（或任何子状态）分配一个类

举个例子。如果状态为app.tab1（或子状态），则活动类将应用于li元素

<ul>
  <li ui-sref-active='active'>
    <a ui-sref="app.tab1">link</a>
  </li>
  <li ui-sref-active='active'>
    <a ui-sref="app.tab2">link</a>
  </li>
  <li ui-sref-active='active'>
    <a ui-sref="app.tab3">link</a>
  </li>
</ul>

您可以使用
ng class

请阅读
这可以通过使用ng类来实现。只需使用控制器中的$location。这个例子很简单。在这里，当$location.path（）等于“/”时，我们向div添加一个活动类

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

看法

这是为像我这样的初学者准备的：

HTML:







角度：

//Create App
var app = angular.module("myApp", ["ngRoute"]);    

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Coming soon</p>"
      })
      .when("/Basics", {
        templateUrl: "/content/views/Basic.html"
      });      
});    

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

  function navChanged() {
    setTimeout(function () {
      var links = angular.element(document.getElementsByClassName("nav-link--link"));
      var activeLink = null;
      for (var i = 0; i < links.length; i++) {
        var link = links[i]
        var linkElement = angular.element(link);
        linkElement.removeClass("active");
        var hash = location.hash.replace("#/", "#")
        if (link.hash && hash.split("#")[1] == link.hash.split("#")[1]) {
          activeLink = linkElement;
        }
      }
      activeLink.addClass("active");
    }, 100);
  };

//创建应用程序
var-app=angular.module（“myApp”[“ngRoute”]）；
//配置路由
app.config（函数（$routeProvider）{
$routeProvider
。否则（{模板：即将推出
“}）
.当（“/”时{
模板：“即将推出
”
})
.when（“/Basics”{
templateUrl:“/content/views/Basic.html”
});      
});    
//控制器
app.controller（'MainCtrl'，函数（$scope，$rootScope，$location）{
$scope.location=$location.path（）；
$rootScope.$on（“$routeChangeSuccess”，函数（）{
navChanged（）；
});
});
函数navChanged（）{
setTimeout（函数（）{
var links=angular.element（document.getElementsByClassName（“导航链接--link”）；
var-activeLink=null；
对于（变量i=0；i
在路由中声明一个变量，基于该变量值为特定选项卡启用活动类。使用
ng class
并根据路由配置选中
$stateParams
或
$state
。真的没有给出太多的细节…向我们展示一些您的配置请检查我添加的代码，我没有使用ui路由器，我使用的是angular route moduleOk。你用UI路由器标记了它，就像我说的，这是一个假设。然后，将条件ng类与$location结合使用可能是一种可行的方法。请参阅新答案。它仅在您键入url时起作用，在我们使用选项卡或下一个achor标记链接时不会发生重新加载。请建议？？注意$routeChangeSuccess事件并更新位置变量。应该相当直截了当。更新了示例代码。初始位置仅在控制器加载时加载。现在，根据您自己的应用程序，此逻辑可能不应位于单个控制器中。真的取决于你的应用程序。谢谢你，我用和locationchangeSuccess事件相同的方法实现了
.controller('MainCtrl', function ($scope, $rootScope, $location) {
    $scope.location = $location.path();
    $rootScope.$on('$routeChangeSuccess', function() {
        $scope.location = $location.path();
    });
});

<script src="~/Content/src/angularjs/angular.min.js"></script>
<script src="~/Content/src/angularjs/angular-route.min.js"></script>

<ul>
  <li>
      <a ui-sref="Basics" href="#Basics" title="Basics" class="nav-link--link">Basics</a>
  </li>
</ul>

<div ng-app="myApp" ng-controller="MainCtrl">
  <div ng-view>

  </div>
</div>

//Create App
var app = angular.module("myApp", ["ngRoute"]);    

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Coming soon</p>"
      })
      .when("/Basics", {
        templateUrl: "/content/views/Basic.html"
      });      
});    

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

  function navChanged() {
    setTimeout(function () {
      var links = angular.element(document.getElementsByClassName("nav-link--link"));
      var activeLink = null;
      for (var i = 0; i < links.length; i++) {
        var link = links[i]
        var linkElement = angular.element(link);
        linkElement.removeClass("active");
        var hash = location.hash.replace("#/", "#")
        if (link.hash && hash.split("#")[1] == link.hash.split("#")[1]) {
          activeLink = linkElement;
        }
      }
      activeLink.addClass("active");
    }, 100);
  };