ionic 列表选项的移动和移除

最新推荐文章于 2018-12-17 17:22:10 发布

指尖飘落的程序

最新推荐文章于 2018-12-17 17:22:10 发布

阅读量1.3k

点赞数

分类专栏： ionic 文章标签： ionic 列表选项的移动和移除

本文链接：https://blog.csdn.net/qq_33212500/article/details/53466726

版权

ionic 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
   <ion-header-bar class="bar-positive">
      <a class="button button-clear icon ion-ios-minus-outline" ng-click="flag.showDelete=!flag.showDelete;flag.showReorder=false;"></a>
      <h1 class="title">成员按钮</h1>
      <a class="button" ng-click="flag.showReorder=!flag.showReorder;flag.showDelete=false;">重新排序</a>
   </ion-header-bar>
   <ion-content>
      <ion-list show-delete="flag.showDelete" show-reorder="flag.showReorder">
         <ion-item ng-repeat="item in items">
            {{item}}!
            <ion-option-button class="button-calm">...</ion-option-button>

            <ion-delete-button class="ion-minus-circled" ng-click="delete_item(item)"></ion-delete-button>
            <ion-reorder-button class="ion-navicon" on-reorder="move_item(item,$fromIndex,$toIndex)"></ion-reorder-button>
         </ion-item>
      </ion-list>
   </ion-content>
</body>
</html>

<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
   $scope.flag={showDelete:false,showReorder:false};
   $scope.items=["Chinese","English","German","Italian","Janapese","Sweden","Koeran","Russian","French"];
   $scope.delete_item=function(item){
      var idx = $scope.items.indexOf(item);
      $scope.items.splice(idx,1);
   };
   $scope.move_item = function(item, fromIndex, toIndex) {

        console.log(fromIndex);
        console.log(toIndex);
        console.log(item);
      $scope.items.splice(fromIndex, 1);
      $scope.items.splice(toIndex, 0, item);
        console.log(item);
   };
});
</script>