読者です 読者をやめる 読者になる 読者になる

angular.jsで画像選択画面を作る方法

やりたかったこと

タイトルのとおりですけど、画像が一覧表示されてて画像をクリックすると画像が選択中になってもう1度クリックすると選択解除となるようにする。
で、送信ボタンをクリックすると選択した画像のidを送信する。というよくあるページを作りたかった

実装方法

controller

myApp.controller("ControllerImage", function($scope) {

  $scope.files = [
     {file: "./img1.jpg", selected: false},
     {file: "./img2.jpg", selected: false},
     {file: "./img3.jpg", selected: false}
  ];

  // 選択状態変更
  $scope.selected = function(key)
  {
    $scope.files[key].selected = $scope.files[key].selected ? false : true;
  }

  // 送信ボタンクリック
  $scope.send = function()
  {
    ids = [];
    angular.forEach($scope.files, function(item, key) {
      if (item.selected) {
        ids.push(item.id);
      }
    }
    if (0 < ids.length) {
      // idをカンマ区切りなどにしてここで送信
      ids.join(',');
    }

  }
});

html

<img ng-repeat="(key, item) in files"
         ng-click="selected(key)"
         ng-style="{'opacity': item.selected ? '0.5' : '1'}"
         src="{{item.file}}">

<button ng-click="send()">送信</button>

画像をクリックすると選択中となって、画像の透過を薄くして選択中であることがわかるようにします。
で、クリックしたときに選択中のidを取得してきて$httpなどで送信することで実装できました

以上です