Question

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

谢谢！

css文件

.selected {
   border:2px solid red;
}

js file

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

Answer 1

按如下所示更改标记方法，以获得单个选择图像列表。

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

Answer 2

我认为最好在控制器中放置尽可能多的代码 - 这更容易测试。所以：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;
   };
})

如何设置fontawesome在此处记录：http://fontawesome.io/get-started/之后，您可以使用fontawesome提供的css类名。也包含在上面的示例中。

Answer 3

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

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

item index是items的{{1}}，但您未在selected数组中设置items。所以item.selected它提出了未定义的错误

请尝试这种方式

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

AngularJS从列表中选择图像

css文件

js file

html文件

3 个答案: