Question

我有标签列表，我试图将类设置为单击的列表项（但只应为单击的项设置类），我的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（），但我不确定如何将焦点设置到其中的选定项目。

Answer 1

您可以应用ng-class来确定活动项目，如下所示。在ng-click上设置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

Answer 2

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

你改变了一些li的元素（添加了ng-class以检查活动的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>

进入控制器，你只需添加一个获取制表参数的函数和一个选中的变量，每次都保存有效的li。默认激活的li是tab1（个人）
```
$scope.selected = 'tab1';
  $scope.select = function(item){
     $scope.selected = item;
}
```

live plunker：http://plnkr.co/edit/TlKZNcDKMcOYDrGNcAch?p=preview

希望有所帮助，祝你好运。

Answer 3

你可以试试这个：

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>

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

3 个答案: