如何在angular.js中點擊li（標籤）設置焦點/活動

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; 
} 

我想將焦點設置到點擊裏項目，但我不能確定我該怎麼辦呢？我試圖使用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

你可以試試這個：

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>

Answer 3

爲了做到這一點，你需要使用的角度指令撥動你改變一點點NG單擊和納克級

1. 你的表內裏的元素（添加納克級以檢查活性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. 到控制器，你只是添加得到一個標籤參數和保持該活性裏一個選擇變量，每個time.Default活性裏是t的函數的AB1（個人）

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

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

希望有所幫助，祝你好運。