javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

List item button event fix

Browse Source
This commit is contained in:
Max Lynch
2013-10-14 16:39:51 -05:00
parent b0923f84b5
commit 9707b94d24
3 changed files with 86 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
dist/js/ionic-angular.js vendored
View File

@ -234,10 +234,11 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
require: '^list',
replace: true,
transclude: true,
scope: true,
scope: {
item: '=',
onSelect: '&',
onDelete: '&',
onButtonClicked: '&',
canDelete: '@',
canReorder: '@',
canSwipe: '@',
@ -250,10 +251,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
<div class="list-item-content" ng-transclude>\
</div>\
<div class="list-item-drag" ng-if="canReorder && isEditing">\
<button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
<button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
</div>\
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
<button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
</div>\
</li>',
link: function($scope, $element, $attr, list) {
@ -261,6 +262,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
$scope.deleteIcon = list.scope.deleteIcon;
$scope.reorderIcon = list.scope.reorderIcon;
$scope.buttonClicked = function(button) {
button.onButtonClicked && button.onButtonClicked($scope.item, button);
};
list.scope.$watch('isEditing', function(v) {
$scope.isEditing = v;
});

11
js/ext/angular/src/directive/ionicList.js vendored
View File

@ -6,10 +6,11 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
require: '^list',
replace: true,
transclude: true,
scope: true,
scope: {
item: '=',
onSelect: '&',
onDelete: '&',
onButtonClicked: '&',
canDelete: '@',
canReorder: '@',
canSwipe: '@',
@ -22,10 +23,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
<div class="list-item-content" ng-transclude>\
</div>\
<div class="list-item-drag" ng-if="canReorder && isEditing">\
<button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
<button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
</div>\
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
<button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
</div>\
</li>',
link: function($scope, $element, $attr, list) {
@ -33,6 +34,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
$scope.deleteIcon = list.scope.deleteIcon;
$scope.reorderIcon = list.scope.reorderIcon;
$scope.buttonClicked = function(button) {
button.onButtonClicked && button.onButtonClicked($scope.item, button);
};
list.scope.$watch('isEditing', function(v) {
$scope.isEditing = v;
});

74
js/ext/angular/test/tabs.html
View File

@ -8,6 +8,44 @@
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
<style>
.fade-out > .ng-enter,
.fade-out > .ng-leave,
.fade-out > .ng-move {
-webkit-transition: 0.2s linear all;
transition: 0.4s ease-out all;
position:relative;
}
.fade-out > .ng-enter {
left:-10px;
opacity:0;
}
.fade-out > .ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.fade-out > .ng-leave {
left:0;
opacity:1;
}
.fade-out > .ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.fade-out > .ng-move {
opacity:0.5;
}
.fade-out > .ng-move.ng-move-active {
opacity:1;
}
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<tab-controller>
@ -18,14 +56,16 @@
<button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
</header>
<content has-header="true" has-tabs="true">
<list is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
<list is-editing="isEditingItems" animation="fade-out" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
<list-item ng-repeat="item in items"
item="item"
buttons="item.buttons"
can-delete="true"
can-reorder="true"
can-swipe="true"
on-delete="deleteProject(project)"
on-select="selectProject(project)">
on-delete="deleteItem(item)"
ng-class="{completed: item.isCompleted}"
>
{{item.title}}
<i class="{{item.icon}}"></i>
</list-item>
@ -59,11 +99,37 @@
.controller('HomeCtrl', function($scope) {
$scope.items = [];
var removeItem = function(item, button) {
console.log('Removing item', item);
// Remove ourselves
$scope.items.splice($scope.items.indexOf(item), 1);
};
var completeItem = function(item, button) {
// Remove ourselves
console.log('Completing item', item);
item.isCompleted = true;
};
$scope.removeItem = function(item) {
removeItem(item);
};
for(var i = 0; i < 30; i++) {
$scope.items.push({
title: 'Task ' + (i + 1)
title: 'Task ' + (i + 1),
buttons: [{
text: 'Done',
type: 'button-success',
onButtonClicked: completeItem,
}, {
text: 'Delete',
type: 'button-danger',
onButtonClicked: removeItem,
}]
});
}
})
</script>