AngularJS select image from list

Question

I'm implementing simple pictures list. here's my code. I have 2 questions: 1. I want to make a single choice whenever the user click an image. Whenever he choose one picture it will clear the other choice. how can I do that? 2. Instead of border I would like to use an icon such as fa-check (http://fontawesome.io/icon/check/). How can I combine it in the css?

Thanks!

css file

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

<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

Change your taggle method as follows to have a single select image list.

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

And change the view as

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

So only one image can be selected at the same time.

For using an icon instead of border you can set the icon as background image. the following link are usefull

CSS background-position Property

Answer 2

1. I think it is best put as much code as possible in the controller - this is easier to test. So: the html snippet:

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

the controller:

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. how to setup fontawesome is documented here: http://fontawesome.io/get-started/ After that you can use the css class names provided by fontawesome. Also included in the example above.

Answer 3

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

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

that item is a index for items, but you didn't set selected in your items array . So item.selected it's threw undefined error

Please try this way

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