文档章节

angular 选择删除 小功能

zwjjap
 zwjjap
发布于 2015/11/17 16:21
字数 352
阅读 426
收藏 0

要实现的功能,如图:


html代码:

编辑按钮代码:

<button ng-if="noteTabs[0].active" class="button button-icon" ng-click="privateNote_edit()">{{privateNoteEditAndCancel}}</button>

列表代码:

<ion-list show-delete="flag.showDelete">
   <ion-item ng-repeat="privateNote in privateNoteList" class="item item-icon-left item-icon-right" ng-click="private_note()">
      <i class="icon ion-ios-list-outline assertive"></i>
       {{privateNote.title}}
       <span class="private-time-date">
           <i class="icon ion-ionic ion-share assertive x2b-note-public-share"></i>
           {{privateNote.datetime}}
       </span>
       <ion-delete-button  ng-init="privateNote.checked = false;" ng-class="{true: 'ion-ios-checkmark', false: 'ion-ios-circle-outline'}[privateNote.checked]" ng-click="noteChecked(privateNote);"></ion-delete-button>			
     </ion-item>
 </ion-list>

全选,删除 代码

 <a class="button button-stable button-clear red" ng-click="selectAll()">{{allSelectOrNot}}</a>
 <a class="button button-stable button-clear blue" ng-click="deleteAll()">删除</a>


js代码:

.controller('CourseNoteCtrl', ['$scope', '$state', '$location', 'Course', '$stateParams', 'Utilities', 'constant', 'AppAgent', '$window', 'socialSharing', 
    function($scope, $state, $location, Course, $stateParams, Utilities, constant, AppAgent, $window, socialSharing) {
      $scope.courseNoteTitle = socialSharing.getTitle();

      // var detailId = $stateParams.courseId;
      // Course.getCourseInfo(detailId).then(function(data) {
      //   $scope.courseInfo = data;
      //   alert(courseInfo.name);
      // });

      $scope.privateNoteList = [{
        title: "我的笔记1111111",
        datetime: "YYYY/MMM/DD hh:mm"
      }, {
        title: "我的笔记2",
        datetime: "YYYY/MMM/DD hh:mm"
      }, {
        title: "我的笔记3",
        datetime: "YYYY/MMM/DD hh:mm"
      }, {
        title: "我的笔记4",
        datetime: "YYYY/MMM/DD hh:mm"
      }, {
        title: "我的笔记5",
        datetime: "YYYY/MMM/DD hh:mm"
      }];
      
      $scope.triggerSubTabs = function(tabName) {
        var i = $scope.noteTabs.length;

        while (i--) $scope.noteTabs[i].active = $scope.noteTabs[i]['name'] == tabName ? true : false;
        angular.element($window).bind('orientationchange', function() {
          $scope.$apply();
        });
      };

      // $scope.private_note = function() {
      //   $state.go('course.ClassNote.PrivateNote');
      // };

      // $scope.public_note = function() {
      //   $state.go('course.ClassNote.PublicNote');
      // };

      $scope.flag = {showDelete:false};

      $scope.privateNoteEditAndCancel = "编辑";
      $scope.privateNoteEditState = false;
      
      
     //编辑按钮
      $scope.privateNote_edit = function() {
        //$scope.privateNoteEditState = $scope.privateNoteEditState == true ? false : true;
        $scope.flag.showDelete=!$scope.flag.showDelete;
        $scope.privateNoteEditState = !$scope.privateNoteEditState
        if ($scope.privateNoteEditState == true) {
           $scope.privateNoteEditAndCancel = "取消";
        } else {
          $scope.privateNoteEditAndCancel = "编辑";
        }
      };
      
      
     //选择取消
      $scope.noteChecked = function(privateNote) {
        privateNote.checked = !privateNote.checked;
        //alert(privateNote.checked);
        
       };

      $scope.allSelectOrNot = "全选";
      //$scope.allSelectMode = false;
      //全选
      $scope.selectAll =function(){
        for(var i =0 ; i<$scope.privateNoteList.length;i++){
          $scope.privateNoteList[i].checked =true;
          //alert( $scope.privateNoteList[i].checked);
        }

      }
      
      //删除
      $scope.deleteAll =function(){
        for(var i =0 ; i<$scope.privateNoteList.length;i++){
           if($scope.privateNoteList[i].checked ===true){
              //alert($scope.privateNoteList[i].checked +$scope.privateNoteList[i].title);
              $scope.privateNoteList.splice(i,1);
              i--;
           }
        }
        //return $scope.privateNoteList.splice(i,1);
      }
    }
  ])



注释:

© 著作权归作者所有

zwjjap
粉丝 13
博文 198
码字总数 21945
作品 0
武汉
程序员
私信 提问
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7.1K
22
在 Angular 8 中,我们可以期待些什么

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前...

葡萄城技术团队
04/15
387
0
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.7K
14

没有更多内容

加载失败,请刷新页面

加载更多

CSS盒子模型

一、什么叫框模型 页面元素皆为框(盒子) 定义了元素框处理元素内容,内边距,外边距以及边框的计算方式 二、外边距 围绕在元素边框外的空白距离(元素与元素之间的距离) 语法:margin,定...

wytao1995
今天
4
0
Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部