Question

我有三个按钮，当用户点击它时，应该更改按钮的背景颜色，因为我在这里使用了路由概念。

这是我写的 HTML

  <body ng-controller="mainController">
  <ul class="list-group">
      <a ng-href="#/"><li class="list-group-item" ng-class="{'red': x=='#/'}" ng-click="showLocation()" >Home</li></a>
      <a ng-href="#/Second-page"><li class="list-group-item" ng-class="{'red': x=='#/Second-page'}" ng-click="showLocation()" >Second page</li></a>
      <a ng-href="#/Third-page"><li class="list-group-item" ng-class="{'red': x=='#/Third-page'}" ng-click="showLocation()" >Third page</li></a>
  </ul>
</body>

CSS：

          .list-group-item.red{
          background-color: red;
          color: white;
          padding: 10px;
      }

JS：

var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function($routeProvider){

$routeProvider

.when("/", {
   templateUrl: "main.html",
   controller: "mainController"
})
.when("/Second-page", {
    templateUrl: "Second.html",
    controller: "mainController"
})
.when("/Second-page/:num", {
    templateUrl: "Second.html",
    controller: "mainController"
})
.when("/Third-page", {
    templateUrl: "Third.html",
    controller: "secondController"
})
 .when("/Third-page/:num", {
    templateUrl: "Third.html",
    controller: "secondController"
})

}）;

myApp.controller("mainController", ["$scope", "serviceName", "$routeParams", "$location", function($scope, serviceName, $routeParams){
$scope.x = window.location.hash;
$scope.showLocation = function(){
   $scope.x = window.location.hash;
}

我的问题是location.hash无法正常工作。单击按钮时，我得到以前的哈希值。

例如，当我点击第一个按钮时，没有发生任何事情，当我点击第二个按钮时，第一个按钮哈希值被取出并且第一个按钮被点击。现在当我点击第三个按钮时，前一个哈希值是第二个按钮的哈希值，第二个按钮被突出显示。

Css正在应用于之前的哈希值。

任何人都可以为我澄清这一点，我对确切发生的事情感到困惑。在此先感谢:)

Answer 1

Angular有时可以运作＆＃34;太快＆＃34;要听到一些变化＃34;通过其余的代码。

为了解决这个问题，您可以在代码中添加0长度$timeout，使其等到下一个摘要周期执行。

myApp.controller("mainController", ["$scope", "serviceName", "$routeParams", "$location", "$timeout", function($scope, serviceName, $routeParams, $location, $timeout){
    $scope.x = window.location.hash;
    $scope.showLocation = function(){
        $timeout(function(){
            $scope.x = window.location.hash;
        });
    }
}]);

Answer 2

通过编辑css文件，可以在点击按钮时更改按钮的颜色。

 .list-group-item.red{
          background-color: red;
          padding: 10px;
      }
      
 .list-group-item.red a{
          color: white;
       }

.list-group-item.red a:active{
          color: #fff;
          /*you can add any value after color:*/
       }

根据哈希值单击时更改按钮的颜色

2 个答案: