单元素选择&Angularjs中的多元素选择

Single Element Selection & Multi Element Selection In Angularjs

本文关键字：元素 选择 Angularjs 单元素      更新时间：2023-09-26

我使用angular js为我的工作。我有一个图像列表，当我点击其中的任何一个，它被选中，它将显示在结果区域。这里我使用了2个结果区域，一个是单一选择属性，另一个是多选择属性。

如果我选择任何一个图像，它将在结果区域显示相应的图像属性。比如image1 selected，结果区域有图像名称&渔政船等

如果我选择了多个图像，它将在结果区域显示这些拇指图像。

我已经为它创建了一个基本的提琴

你能帮我一下吗?我的基本代码如下所示 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;
}]);

试试这个:

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/

相关文章：