如何改變點擊項目glyphicon

我在我的圖標頁面結合的產品列表從數據庫，最初我展示glyphicon關閉所有項目，當我點擊列表項正在改變單擊項目glyphicon就ok，但如果我選擇在列表中第一項的任何其他項目glyphicon改變就ok，我想改變點擊項目圖標如何改變點擊項目glyphicon

我的代碼是視圖

<div class="collapse navbar-collapse " id="myNavbar"> 
          <ul class="nav navbar-nav"> 
           <li ng-repeat="prod in products"> 
            <a href="#" id="{{prod.ID}}" class="productClass" ng-click="getModules($event)">{{prod.PRODCTNAME}}<span id="iProduct" class="glyphicon glyphicon-off ChangeButtonColorOrangeRed"></span></a> 
           </li> 
          </ul> 
         </div>

$scope.getModules = function (event) { 
     var prodID = event.target.id; 
     var productElement = angular.element(document.querySelector('#iProduct')); 
     productElement.toggleClass('glyphicon glyphicon-off ChangeButtonColorOrangeRed').toggleClass('glyphicon glyphicon-ok ChangeButtonColorGreen'); 
     var moduleDiv = angular.element(document.querySelector('#divModule')); 
     moduleDiv.toggleClass('divProductsHide').toggleClass('divProductsShow'); 
     productService.getModules(prodID).then(function (d) { 
      $scope.modules = d.data; 
     }, function (error) { 
      alert('Error!'); 
     }); 

    };

CSS

<style> 
    .ChangeButtonColorOrangeRed { 
     color: orangered; 
    } 

    .ChangeButtonColorGreen { 
     color: green; 
    }

來源

2016-12-21 suman goud

看到這個http://jsfiddle.net/moncef_hbey/HB7LU/17481/ – NNR

還可以獲得通過這個例子below.Plunker here

HTML

<body data-ng-controller="myController"> 
    <div class="collapse navbar-collapse " id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li ng-repeat="prod in products"> 
      <a href="#" class="productClass" ng-click="selectProduct(prod.id)">{{prod.name}} 
      <span data-ng-hide="selectedProducts.indexOf(prod.id) > -1" class="glyphicon glyphicon-off ChangeButtonColorOrangeRed"></span> 
      <span data-ng-show="selectedProducts.indexOf(prod.id) > -1" class="glyphicon glyphicon-ok ChangeButtonColorGreen"></span> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </body>

angular.module("myApp",[]); 

angular.module("myApp").controller("myController",function($scope){ 

    $scope.products = [ 
    {id:1,name:'A'}, 
    {id:2,name:'B'}, 
    {id:3,name:'C'} 
    ]; 

    $scope.selectedProducts = []; 

    $scope.selectProduct = function(id){ 

    var index = $scope.selectedProducts.indexOf(id); 

    if(index > -1){ 
     $scope.selectedProducts.splice(index,1); 
    }else{ 
     $scope.selectedProducts.push(id); 
    } 

    } 

})

更新

選擇項目

更改此功能選擇中選擇只有一個產品

$scope.selectProduct = function(id){ 

    $scope.selectedProducts= [id]; 

}

來源

2016-12-21 06:15:57

謝謝Aravinthon其工作，但我想改變只點擊項目圖標確定，剩下的所有項目關閉 –

我已更新我的答案。 :-)希望它會解決 –

不工作Aravinthon，glyphicon不改變，如果我使用這個 –

可以使用納克級來解決這個問題。

<div class="collapse navbar-collapse " id="myNavbar"> 
    <ul class="nav navbar-nav"> 
     <li ng-repeat="prod in products" ng-init="off=false"> 
      <a href="#" id="{{prod.ID}}" class="productClass" ng-click="off=!off">{{prod.PRODCTNAME}}<span id="iProduct" ng-class="off?'change-button-to-green':'change-button-to-red'"></span></a> 
     </li> 
    </ul> 
</div>

CSS：

.change-button-to-red { 
     color: orangered; 
} 

.change-button-to-green { 
     color: green; 
}

這將解決問題。

來源

2016-12-21 06:01:33 SaiUnique

感謝賽的響應，在NG-點擊我在我看來，如何結合另一個列表來處理兩個點擊事件 –

你可以用''''''''來分別調用它們。 – SaiUnique

如何更改只點擊的項目圖標確定，剩下的所有項目關閉 –

的問題是：

var productElement = angular.element(document.querySelector('#iProduct'));

您選擇具有ID值 '#iProduct'。因此，查詢選擇器會選擇第一個匹配項並更改第一個範圍的類。

因此，還要提供動態ID範圍。我加入這個小提琴：

https://jsfiddle.net/ranageneration/s5ua3fed/

來源

2016-12-21 06:21:06

如何改變點擊項目glyphicon

回答

相關問題