ionic 列表选项的移动和移除

来源：互联网发布：疯狂联盟座龙升级数据编辑：程序博客网时间：2024/06/05 15:24
<!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>
0 0