如何在angular.js中对单击的li(选项卡）设置焦点/活动

How to set focus/active on the clicked li(tab) in angular.js

本文关键字：选项 设置 活动 焦点 li angular js 单击      更新时间：2023-09-26

我有一个选项卡列表，我试图在其中为单击的列表项设置类（但类应该只为单击的项设置），我的html看起来像这样：

 <div class="details-table">
    <ul class="table-toggle">
        <li class="active"><a href="" class="">Personal</a></li>
        <li><a href="" class="" >Professional</a></li>
    </ul>
    <div class="scrollable-table-box">
        <table>
              ...
        </table>
     </div>
  </div>

我的css看起来是这样的：

 .details-table {
     display: block;
     float: left;
     width: 100%;
 }
 .table-toggle {
     display: block;
     float: left;
     width: 100%;
     border-bottom: solid 5px #d9d9d9;
 }
 .table-toggle li {
     display: block;
     float: left;
     width: 220px;
     margin-right: 5px;
 }
 .table-toggle li a {
     color: #868686;
     display: block;
     font-size: 14px;
     padding: 15px 30px;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
 }
 .table-toggle li:hover a,
 .table-toggle li.active a {
     background-color: #d9d9d9;
     color: #333;
     font-weight: 600;
 }

我想将焦点设置为单击的li项目，但我无法确定如何做到这一点？我试着使用ng-click（），但我不知道如何将焦点设置为里面的选定项目。

您可以应用ng类来确定活动项，如下所示。单击时设置activetab。

<li ng-class="{active: activeTab == 'personal'}"><a href="#" ng-click="setActiveTab('personal')" class="">Personal</a></li>
<li ng-class="{active: activeTab == 'professional'}"><a href="#" ng-click="setActiveTab('professional')" class="" >Professional</a></li>

//JS-

var app = angular.module('plunker', []);    
app.controller('MainCtrl', function($scope) {
  $scope.activeTab = 'personal';
  $scope.setActiveTab = function(value) {
    $scope.activeTab = value;
  };
});

Plunker示例：http://plnkr.co/edit/Ze7ps9XcNpLPHIs4I6Mi?p=preview

为了实现这一点，您需要使用角度指令ng-click和ng-class

  1. 在您的表切换中，您稍微更改了li的元素（添加了ng类以检查活动的li）：

    <ul class="table-toggle">
    <li ng-class="{'active':selected == 'tab1'}" ng-click="select('tab1')"><a href="" class="">Personal</a></li>
    <li ng-class="{'active':selected == 'tab2'}" ng-click="select('tab2')"><a href="" class="" >Professional</a></li>
</ul>

  2. 您只需在控制器中添加一个函数，该函数每次都会获得一个选项卡参数和一个选定的变量，该变量保存活动li。默认活动li是tab1（个人）

    $scope.selected = 'tab1';
  $scope.select = function(item){
     $scope.selected = item;
}

现场灌篮：http://plnkr.co/edit/TlKZNcDKMcOYDrGNcAch?p=preview

希望有帮助，祝你好运。

你可以试试这个：

var m = [{
  isSelected: true,
  country: "India",
  index: "2"
}, {
  isSelected: false,
  country: "England",
  index: "2"
}, {
  isSelected: false,
  country: "Brazil",
  index: "3"
}, {
  isSelected: false,
  country: "UK",
  index: "1"
}, {
  isSelected: false,
  country: "USA",
  index: "3"
}, {
  isSelected: false,
  country: "Syria",
  index: "2"
}]
function MyCtrl($scope) {
  $scope.items = m;
  $scope.updateSelectedItem = function(item) {
    m.forEach(function(row) {
      row.isSelected = false;
    });
    item.isSelected = true;
  }
}
.selected {
  background: orange
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="i in items" ng-class="{selected:i.isSelected == true}" ng-click="updateSelectedItem(i)">{{i.country}}: {{i.index}}</li>
  </ul>
</div>

相关文章：