Ionic /如何选择列表框中的多个项目?

时间:2015-06-08 05:30:26

标签: angularjs ionic-framework ionic

我目前正在使用Ionic 1.3.16版本。在这里,我需要在下面的列表中选择多个列表项。

<div class="list listbox" ng-if="MemberData.length" ng-repeat="d in MemberData">

        <div class="item  item-avatar item-list-detail item-thumbnail-left thumnail_box">                
                <img ng-if="d.ThumbnailUrl" src="{{d.ThumbnailUrl}}" class="imground">
                <div ng-if="d.ThumbnailUrl==''|| d.ThumbnailUrl==null" class="item-icon-left">
                    <div><i class="icon ion-person bgskyblue  iconx dashboardsquare"></i></div>
                </div>
                <h3 class="spaceWrap"><b>{{d.Name}}</b></h3>
                <p class="spaceWrap">
                    <span class="small"><i class="icon ion-location">&nbsp;</i>{{d.Location}}</span>
                </p>

           </div>
    </div>

列表页面的屏幕截图: enter image description here

1 个答案:

答案 0 :(得分:8)

使用ng-click指令:

<div class="item" ng-click="clicked(d)" ng-class="{ active: d.selected }">
    <h3 class="spaceWrap"><b>{{d.Name}}</b></h3>
</div>

控制器:

var selected = [];

$scope.clicked = function (member) {
    var index = selected.indexOf(member);
    if(index > -1) {
        selected.splice(index, 1);
        member.selected = false;
    } else {
        selected.push(member);
        member.selected = true;
    }
}

JSFIDDLE