メニュー項目を有効にしてanglejsでクリックする

Question

私はサイドメニューバーを持っています。ここでは、ng-repeatを使ってリストに項目を表示しています。私はclick.I上の項目を強調表示したい

<div class="list-group" style="height:50px"> 
<span href="#" class="list-group-item active"> 
      Inbox 
     </span> 
     <div ng-repeat="record in inboxlist.Result"> 
      <a class='list-group-item' ng-click="viewDates($index);">{{record.customer_name}}</a> 
     </div> 
    </div> 

は、初心者は誰かが事前にこのeffect.thanksをachiveする方法で私を導くことができています。

Answer 1

ng-class="{selected: $index === selectedIndex}" 

あなたのHTML

<a class='list-group-item' ng-click="viewDates($index);" ng-class="{selected: $index === selectedIndex}">{{record.customer_name}}</a> 

とあなたのviewDates機能は、あなたがに応じて動的にスタイルを追加するためにNG-クラスを使用することができます

$scope.selectedIndex = null; 
$scope.viewDates = function ($index) { 
    $scope.selectedIndex = $index; 
    //.... your remaining code here 
}; 

Answer 2

ようにする必要があり、同じようngClassを追加状況、契約条項。

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.inboxlist = {}; 
 
$scope.inboxlist.Result = [{"customer_name":"ss"},{"customer_name":"aa"},{"customer_name":"cc"}] 
 

 
})

.change-color{ 
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div class="list-group" style="height:50px"> 
 
<span href="#" class="list-group-item active" > 
 
      Inbox 
 
     </span> 
 
     
 
     <div ng-repeat="record in inboxlist.Result" ng-init="record.check = false"> 
 
      <a class='list-group-item' 
 
      ng-click="record.check = true;viewDates($index);" 
 
      ng-class="{'change-color':record.check}">  {{record.customer_name}} </a> 
 
     </div> 
 
     
 
    </div> 
 
</div>