@fixtyle wrote:
1
down vote
favorite
I am trying to solve a problem on ionic. I have two buttons that should display the reorder/delete buttons. but they dont change nothing.this is the view:
<ion-view view-title="Artist List">
<div class="bar bar-subheader item-input-inset">
<ion-content class="has-subheader" ng-controller="ListController">
<img ng-src="img/{{item.shortname}}.jpg" alt="{{item.name}} Photo"/> <h2>{{item.name}}</h2> <h3>{{item.reknown}}</h3> <p> {{item.bio | limitTo: 5}} {{item.bio.length > 5 ? '…' : ''}} </p> <button class="button button-clear icon ion-star button-assertive" ng-click="toggleStar(item)" ng-show="item.star"></button> <ion-option-button class="button-dark" ng-click="toggleStar(item)"> <i class="icon ion-star"></i> </ion-option-button> <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button> <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"> </ion-reorder-button> </ion-item></ion-content>
this is my controller:// Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('tabs',{
url:'/tab',
abstract:true,
templateUrl:'templates/tabs.html'
})
.state('tabs.home',{
url:'/home',
views:{
'home-tab':{
templateUrl:'templates/home.html'
}
}
})
.state('tabs.list',{
url:'/list',
views:{
'list-tab':{
templateUrl:'templates/list.html',
controller:'ListController'
}
}
})
.state('tabs.detail',{
url:'/list/:aId',
views:{
'list-tab':{
templateUrl:'templates/detail.html',
controller:'ListController'
}
}
})$urlRouterProvider.otherwise('/tab/home'); }) .controller('ListController',['$scope','$http', '$state', function($scope, $http, $state){$http.get('js/data.json').success(function(data){
$scope.artists=data;
$scope.whichartist=$state.params.aId;
$scope.data={showReorder:true,showDelete:true};$scope.onItemDelete = function(item) { $scope.artists.splice($scope.artists.indexOf(item), 1); }; $scope.toggleStar = function(item) { item.star = !item.star; } $scope.moveItem = function(item, fromIndex, toIndex) { $scope.artists.splice(fromIndex, 1); $scope.artists.splice(toIndex, 0, item); }; $scope.doRefresh = function(){ $http.get('js/data.json').success(function(data){ $scope.artists = data; $scope.$broadcast('scroll.refreshComplete'); })};});
}]);
what is the problem here? what do I miss? why the page isnt rendering after changing the scope data while clicking these buttons.
Posts: 1
Participants: 1