List demo with animations!

This commit is contained in:
Max Lynch
2013-10-09 21:00:06 -05:00
parent b53c707961
commit a3c3c78470
6 changed files with 70 additions and 39 deletions

18
dist/ionic-angular.js vendored
View File

@ -180,24 +180,27 @@ angular.module('ionic.ui.content', [])
}
})
;
angular.module('ionic.ui.list', ['ionic.service'])
angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
.directive('listItem', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<li class="list-item">' +
template: '<li class="list-item">' +
' <div class="list-item-edit" ng-if="item.canDelete">' +
' <button class="button button-icon"><i class="icon-minus-sign"></i></button>' +
' </div>' +
' <div class="list-item-content" ng-transclude>' +
' </div>' +
' <div class="list-item-buttons" ng-if="item.canSwipe">' +
' <button class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
' <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
' </div>' +
'</li>',
link: function($scope, $element, $attr) {
$scope.buttonClicked = function(button) {
button.buttonClicked && button.buttonClicked($scope.item);
}
}
}
})
@ -209,10 +212,11 @@ angular.module('ionic.ui.list', ['ionic.service'])
transclude: true,
scope: {
isEditing: '=',
items: '='
items: '=',
animation: '='
},
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
'<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
'<list-item ng-repeat="item in items | filter:{hide:\'false\'}" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
' {{item.text}}' +
' <i class="{{item.icon}}" ng-if="item.icon"></i>' +
'</list-item>' +
@ -221,6 +225,10 @@ angular.module('ionic.ui.list', ['ionic.service'])
return function($scope, $element, $attr) {
var lv = new ionic.views.List({el: $element[0]});
if(attr.animation) {
$element.addClass(attr.animation);
}
$element.append(transclude($scope));
}
}