Angularjs中的單元素選擇和多元素選擇

Question

我使用角度js工作。當我點擊其中的任何一個圖像時，我有一張圖像列表，它已被選中並顯示在結果區域中。在這裏我使用了2個結果區域，一個是單選屬性，另一個是多選屬性。

如果我選擇任何一個圖像，它將在結果區域顯示相應的圖像屬性。可以說image1選中，結果區域有圖像名稱&尺寸等

如果我選擇的不只是一個圖像，它會在結果區域顯示那些拇指圖像。

我已經創造了它

你能幫助我在此基礎Fiddle。我的基本代碼看起來像下面

的Html

<div ng-app="MyApp" > 
<div ng-controller="MyCtrl" >  
    <ul ng-repeat="image in images"> 
     <li ng-click="selection($event)">{{image}}</li> 
    </ul> 
</div> 
<div ng-show="singleSelectedProperty"> 
    Single Selected Property shown here 
</div> 
<div ng-show="multiSelectedProperty"> 
    Multi Selected Properties shown here 
</div> 
</div> 

CSS

li 
{ 
    list-style: none; 
    cursor:pointer; 
    font-weight:bold; 
} 
li.selected 
{ 
    color:green; 
} 

角

var app = angular.module("MyApp",[]); 

app.controller('MyCtrl',['$scope', function($scope){ 
    $scope.images = [ 
    'image 1', 
    'image 2', 
    'image 3', 
    'image 4' 
    ]; 
    $scope.selection = function(event){ 
     $(event.target).toggleClass('selected'); 
    }; 
    $scope.singleSelectedProperty = false; 
    $scope.multiSelectedProperty = false; 

}]);  

Answer 1

試試這個：

var app = angular.module("MyApp",[]); 

app.controller('MyCtrl',['$scope', function($scope){ 
    $scope.images = [ 
    'image 1', 
    'image 2', 
    'image 3', 
    'image 4' 
    ]; 
    var myArr=[]; 
    $scope.selection = function(event,img){ 
    var index=myArr.indexOf(img); 
     if(index==-1) 
     { 
      myArr.push(img); 
     }else 
     { 
      myArr.splice(index,1); 
     } 
     if(myArr.length===1) 
     { 
      $scope.singleSelectedProperty = true; 
      $scope.multiSelectedProperty = false; 
     }else if(myArr.length>1) 
     { 
      $scope.singleSelectedProperty = false; 
      $scope.multiSelectedProperty = true; 
     }else 
     { 
      $scope.singleSelectedProperty = false; 
      $scope.multiSelectedProperty = false; 
     } 
     console.log($scope.singleSelectedProperty); 
     console.log($scope.multiSelectedProperty); 
     $(event.target).toggleClass('selected'); 
    }; 
    $scope.singleSelectedProperty = false; 
    $scope.multiSelectedProperty = false; 

}]); 

的jsfiddle：每該數組的大小http://jsfiddle.net/twkbvkzq/6/