Question

我的页面中带有图标的数据库产品的绑定列表，最初显示所有项目的glyphicon，当我点击列表项目时，将点击项目glyphicon更改为ok，但如果我选择列表中的任何其他项目第一项glyphicon更改为ok，我想更改点击项目的图标

我的代码是图

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

JS

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

Answer 1

您可以使用ng-class来解决此问题。

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

这将解决问题。

Answer 2

您也可以使用下面的示例获取所选项目.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>

<强> JS

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

}

Answer 3

问题在于选择：

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

您正在使用ID＆＃39;＃iProduct＆＃39;选择值。因此查询选择器选择第一个匹配并更改第一个跨度的类。

因此，也要提供动态id。我为此添加了一个小提琴：

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

如何更改单击的项目glyphicon

3 个答案: