AngularJS从列表中选择图像

我正在实现简单的图片列表。 这是我的密码。我有两个问题： 1.每当用户单击图像时，我都要做出一个选择。每当他选择一张图片时，就会清除另一张图片。我该怎么做？ 2.我希望使用图标（如fa check（））而不是边框。如何将其组合到css中

谢谢

css文件 js文件 html文件

项目清单

---

按如下方式更改标记方法，以获得单选图像列表

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

因此，同一时间只能选择一个图像

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

该

项

是

项

的

索引

，但您没有在

项

数组中设置

所选的

。所以

item.selected

它抛出了未定义的错误

请往这边走

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

我认为最好在控制器中放入尽可能多的代码，这样更容易测试。因此：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>

这里介绍了如何设置fontawesome：之后，您可以使用fontawesome提供的css类名。也包括在上面的示例中

---

在范围中使用

selectedItem

字段，并将其设置为单击的项目，而不是在每个项目中使用选定标志。谢谢！我是AngularJS的新手。你有一个好的例子或参考，我可以按照你的建议吗？谢谢你的回答@达维马汀：那么你应该通过点击答案左边的灰色复选框来接受它。

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

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

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

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

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