Question

我只想在我点击的标签上使用活动课程，休息应该显示'非活动课程'：

app.controller("myCtrl", function($scope, $log){
       $scope.activeact=false;
       $scope.makeactive=function(){

       $scope.activeact=true;
    }
});


<ul>
    <li><a href="#" ng-click="makeactive()" ng-class="activeact ? 'active' : 'inactive'">one</a></li>
    <li><a href="#" ng-click="makeactive()" ng-class="activeact ? 'active' : 'inactive'">Two</a></li>
    <li><a href="#" ng-click="makeactive()" ng-class="activeact ? 'active' : 'inactive'">Three</a></li>
</ul>

请帮助

Answer 1

考虑到列表元素的数量是固定的和小的，以便于解决;

app.controller("myCtrl", function($scope, $log){

       $scope.makeactive=function(num){
            $scope['li'+num]=true;
       }
});

HTML是：

<ul>
   <li><a href="#" ng-click="makeactive(1)" ng-class="li1 ? 'active' : 'inactive'">one</a></li>
   <li><a href="#" ng-click="makeactive(2)" ng-class="li2 ? 'active' : 'inactive'">Two</a></li>
   <li><a href="#" ng-click="makeactive(3)" ng-class="li3 ? 'active' : 'inactive'">Three</a></li>
</ul>

显然，这不是一个通用的解决方案，但对于小元素来说，这是一个更容易的解决方案。

Answer 2

这是你能做的！使用以下数组使用ng-repeat：

$scope.numbers = ["one", "two", "three"];

现在，ng-repeat上的<li>将如下所示：

<li ng-repeat="num in numbers">
  <a href="#" ng-click="makeactive($index)" 
     ng-class="activeact{{$index}} ? 'active' : 'inactive'"
     ng-bind="num">
  </a>
</li>

现在，在click个链接上，active / inactive将切换。

这是工作代码段！

angular.module("myApp", [])
  .controller("myCtrl", function($scope, $log) {
    $scope.activeact = false;
    $scope.numbers = ["one","two","three"]
    $scope.makeactive = function(index) {
      $scope["activeact"+index] = !Boolean($scope["activeact"+index]);
    }
  });

.active {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="num in numbers"><a href="#" ng-click="makeactive($index)" ng-class="activeact{{$index}} ? 'active' : 'inactive'">{{num}}</a></li>
  </ul>
</body>

Answer 3

使用可以使用这样的不同代码

<ul>
<li><a href="#" ng-click="makeactive(1)" ng-class="selectedindex==1 ? 'active' : 'inactive'">one</a></li>
<li><a href="#" ng-click="makeactive(2)" ng-class="selectedindex==2 ? 'active' : 'inactive'">Two</a></li>
<li><a href="#" ng-click="makeactive(3)" ng-class="selectedindex==3 ? 'active' : 'inactive'">Three</a></li>
</ul>

在控制器中

$scope.makeactive=function(index){    
  $scope.selectedindex=index;
}

Answer 4

你可以使用ui-router：

<ul class="nav nav-pills nav-justified">
    <li ui-sref-active="active"><a ui-sref="home">home</a></li>
    <li ui-sref-active="active"><a ui-sref="about">about</a</li>
    <li ui-sref-active="active"><a ui-sref="contact">contact</a></li>
</ul>

这里的教程：github和Scotch

ui路由器示例：exaple 1和codepen

你可以使用ui-router同样没有ng-class或ng-repeat

类仅在click元素上切换

4 个答案: