2

我正在实现简单的图片列表。这是我的代码。我有 2 个问题： 1. 每当用户单击图像时，我都想做出一个选择。每当他选择一张图片时，它将清除另一个选择。我怎样才能做到这一点？2.我想使用fa-check（http://fontawesome.io/icon/check/）之类的图标而不是边框​​。我怎样才能在css中组合它？

谢谢！

css 文件

.selected {
   border:2px solid red;
}

js文件

$scope.items = [
    {imageUrl: '/app/img/item1.jpg'},
    {imageUrl: '/app/img/item2.jpg'}];

$scope.toggle = function (item) {
    item.selected = !item.selected;
  };

.html 文件

<div class="category rating-type">
<h5>items list</h5>
<div class="pics-continer">
    <ul>
        <li ng-repeat="item in items" ng-click="toggle(item)" ng-class="{'selected':item.selected}">
            <div style="background-image: url({{item.imageUrl}});height:36px; width:40px;display:inline-block"></div>
        </li>
    </ul>
</div>

4

3 回答 3

1

如下更改您的 taggle 方法以获得单个选择图像列表。

    $scope.toggle = function (item) {
        $scope.selectedImage = item.imageUrl;
    };

并将视图更改为

    <li ng-repeat="item in items" ng-click="toggle(item)" ng-class="{'selected':item.imageUrl == selectedImage}">
        <img src="{{item.imageUrl}}" style="height:36px; width:40px;"/>
    </li>

因此只能同时选择一张图像。

要使用图标而不是边框​​，您可以将图标设置为背景图像。以下链接很有用

CSS background-position 属性

于 2014-01-04T18:05:32.797 回答
1

  1. 我认为最好在控制器中放置尽可能多的代码——这更容易测试。所以：html片段：

    <li ng-repeat="item in items" ng-click="selectItem(item)" 

    ng-class="{'fa fa-check':isSelected(item)}">

     <div style="background-image: url({{item.imageUrl}});
     height:36px; width:40px;display:inline-block"></div>
</li>

控制器：

controller('TestController', function($scope){
   $scope.items = [
    {imageUrl: '/app/img/item1.jpg'},
    {imageUrl: '/app/img/item2.jpg'}
   ];
   $scope.selectedItem = null;

   $scope.selectItem = function(item){
    $scope.selectedItem = item;
   };

   $scope.isSelected = function(item){
    if($scope.selectedItem===null){
        return false;
    }
    return item.imageUrl === $scope.selectedItem.imageUrl;
   };
})
  1. 此处记录了如何设置 fontawesome：http://fontawesome.io/get-started/之后，您可以使用 fontawesome 提供的 css 类名。也包括在上面的示例中。
于 2014-01-04T18:11:00.087 回答
0 
$scope.items = [
    {imageUrl: '/app/img/item1.jpg'},
    {imageUrl: '/app/img/item2.jpg'}];

$scope.toggle = function (item) {
    item.selected = !item.selected;
  };

那item是一个indexfor items，但你没有selected在你的items数组中设置。所以item.selected它抛出了未定义的错误

请尝试这种方式

$scope.items = [
        {imageUrl: '/app/img/item1.jpg',selected:true},
        {imageUrl: '/app/img/item2.jpg',selected:false}];
于 2014-01-04T18:06:44.630 回答