Question

我有一个图标列表，如下所示：
https://github.com/docker-library/php/blob/1c56325a69718a3e3cf76179e75d070b7e23da62/5.6/Dockerfile

在我看来，我从角度控制器中检索图标和名称。这就是目前html的样子：

<label-content label="File Format" required="true">
                <span class="col-xs-6">
                    <span ng-repeat="item in formats">
                            &nbsp;&nbsp;&nbsp;<i ng-click="setReportFormat(item.name)" class={{item.icon}}  aria-hidden="true"></i>
                    </span>
                </span>
                <span class="col-xs-10" style="padding-left:18.45em">
                    <span ng-repeat="item in formats">
                            &nbsp;&nbsp;{{item.name | uppercase}}
                    </span>
                </span>
</label-content>

我想要实现的是让图标以这样的方式显示：

基本上，当选择图标时，其他图标应显示为灰色，并且应突出显示所选图标。

仍然是CSS和角度的新手，所以关于如何实现这一点的任何指针？

Answer 1

我怀疑你可以根据需要清理。但是我是怎么接近它的。

angular.module("foo",[])
.controller("foo_c",["$scope",function($scope){
    $scope.icon_list = [{'img_type' : 'PDF', 'item_selected' : false},
                        {'img_type' : 'XLSX', 'item_selected' : false},
                        {'img_type' : 'CSV', 'item_selected' : false}]
    
  }])
.directive("icon", function(){
    return {
      restrict:"E",
      template:"<div ng-click='setSelected()' ng-class='icon.item_selected ? \"selected\" : \"disabled\" ' ><img ng-src='icon.img_type'  /><span ng-bind='icon.img_type'></span> </div>",
      scope : {
        icon:'='
        },
      link : function(scope, e, a ){
         console.log("Setting up ", scope.icon); 
         scope.setSelected = function(){
           scope.icon.item_selected = ! scope.icon.item_selected;
         }
        }
    };
  
  });

.selected {
  background-color: blue; 
}
.disabled {
  opacity : .7;
}
icon {
  border: 1px black solid;
  padding: 5px;
  display :inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo" ng-controller="foo_c" >
  <div ng-bind="icon_list | json"></div>
  <p> File Types </p>
  <icon icon="icon" ng-repeat="icon in icon_list" ></icon>  
</div>

Answer 2

在<span>上使用ng-repeat和ng-class，并在track by $index中输入控制器中更改的某个变量，以指定选择了哪个图标。也许使用{{1}}并关键。

Answer 3

这是使用带有输入类型复选框的标签的最佳方案。在HTML中，您可以执行<input type="checkbox" id= "pdf"> <label for="pdf"> </label><input type="checkbox" id= "xls"> <label for="xls"> </label><input type="checkbox" id= "csv"> <label for="csv"> </label>之类的操作。现在使用display: none;隐藏复选框，标签将作为您的复选框。给标签背景一样的是那些图像。

图标作为角度的可选项目

3 个答案: