AngularJS如何将其设置为切换

AngularJS how to set this to toggle

本文关键字：设置 AngularJS      更新时间：2024-01-10

所以我有一个ng重复，在其中它使用了ng点击和ng类，就像这里的这个plunker

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

现在这很好用，它在您单击项目时设置类。然而，我想设置它，这样如果你再次点击该项目，它将删除该类。

所以我试着做一个if语句，检查它是否已经=为"menuItem"，然后更改它的值，但现在它根本不起作用。

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

提前感谢！

这是因为在if中您分配了一个值

if ($scope.activeMenu = menuItem)

检查相等的insead

if ($scope.activeMenu == menuItem)

简单地用== 替换=

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

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
  }
});
.active {
  background: red;
}
<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>

这应该可以完成

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

请参阅此更新的plnk

相关文章：