Question

所以我有一个ng-repeat，其中使用ng-click和ng-class就像这个plunker一样

http://plnkr.co/edit/TtQNQXOLggs1bsYKNJvx?p=preview

现在这很好用，它会在你点击项目时设置类。但是我想设置它，如果你再次点击该项，那么它将删除该类。

所以我尝试做一些if语句来检查它是否已经= to＆＃39; menuItem＆＃39;然后改变它的价值，但现在它根本不起作用。

 $scope.setActive = function(menuItem) {
 if ($scope.activeMenu = menuItem)
  {
     $scope.activeMenu = 'null';
  }
 else
  {
     $scope.activeMenu = menuItem;
  }
}

提前致谢！

Answer 1

那是因为你在if内分配了一个值

if ($scope.activeMenu = menuItem)

检查平等的内容

if ($scope.activeMenu == menuItem)

只需将=替换为==

即可

Answer 2

检查activeItem是否与item相同，然后将activeItem更新为假值

＆＃13;

var app = angular.module('test', []);

app.controller('MainCtrl', function($scope) {

  $scope.menuItems = ['Home', 'Contact', 'About', 'Other'];
  $scope.activeMenu = $scope.menuItems[0];

  $scope.setActive = function(menuItem) {
    $scope.activeMenu = $scope.activeMenu == menuItem ? undefined : menuItem
  }
});

＆＃13;

.active {

  background: red;

}

＆＃13;

<script src="https://code.angularjs.org/1.3.16/angular.js"></script>
<div ng-app="test" ng-controller="MainCtrl">
  <div class="account-item" ng-repeat='item in menuItems'>
    <div class="account-heading" ng-class="{active : activeMenu === item}">
      <h4 class="account-title">
        <a href="#/Messages" ng-click="setActive(item)"> {{ item }}</a>
      </h4>
    </div>
  </div>
</div>

＆＃13;

Answer 3

这应该可以解决问题

$scope.setActive = function(menuItem) 
{
    if($scope.activeMenu === menuItem)
    {
        $scope.activeMenu = null;
    }
    else
    {
        $scope.activeMenu = menuItem;
    }
}

请参阅this updated plnk

AngularJS如何设置此切换

3 个答案: