ionic framework - angularjs - ionicframework - tap on a row -
i need open new page when item touched i'm not able make work , have no idea why.
this html:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> <!-- app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter" ng-controller="clientsctrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">elenco clienti</h1> </ion-header-bar> <ion-content> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="cerca" ng-model="query[queryby]"> </label> <ion-list> <ion-item ng-repeat="client in clients | filter:query" href="#/app/clients/{{ client.name }}"> <!-- <div class="row" on-hold="showactionsheet(client)"> --> {{ client.name }} <!-- </div> --> </ion-item> </ion-list> </ion-content> </ion-pane> <div class="bar bar-footer bar-positive"> <div class="title"> <button class="button button-icon" ng-click="newclient()"> aggiungi cliente <i class="icon ion-compose"></i> </button> </div> </div> <script id="new-client.html" type="text/ng-template"> <div class="modal"> <!-- modal header bar --> <ion-header-bar class="bar-secondary"> <h1 class="title">nuovo cliente</h1> <button class="button button-clear button-positive" ng-click="closenewclient()">annulla</button> </ion-header-bar> <!-- modal content area --> <ion-content> <form ng-submit="createclient(client)"> <div class="list"> <label class="item item-input"> <span class="input-label">nome:</span> <input type="text" ng-model="client.name"> </label> <label class="item item-input"> <span class="input-label">numero:</span> <input type="tel" ng-model="client.phone"> </label> </div> <div class="padding"> <button type="submit" class="button button-block button-positive">inserisci cliente</button> </div> </form> </ion-content> </div> </script> </body> </html> this app.js
// clients app // angular.module global place creating, registering , retrieving angular modules // 'starter' name of angular module // 2nd parameter array of 'requires' angular.module('starter', ['ionic']) /* costruttore */ .factory('clients', function(){ return{ all: function(){ //recupero tutti clienti var clientsstring = window.localstorage['clients']; //se ci sono dati if( clientsstring ){ //restituisco dati return angular.fromjson(clientsstring); } //non c'รจ nulla return []; }, save: function(clients){ window.localstorage['clients'] = angular.tojson(clients); }, } }) .config(function($stateprovider, $urlrouterprovider) { $stateprovider .state('app.single', { url: "/clients/:clientname", views: { 'menucontent' :{ templateurl: "templates/client.html", controller: 'singlectrl' } } }); }) .controller('clientsctrl', function($scope, $ionicmodal, clients, $ionicactionsheet){ $scope.query = {} $scope.queryby = 'name' // load or initialize projects $scope.clients = clients.all(); $scope.orderprop="name"; // create , load modal $ionicmodal.fromtemplateurl('new-client.html', function(modal) { $scope.clientmodal = modal; }, { scope: $scope, animation: 'slide-in-up' } ); // called when form submitted $scope.createclient = function(client) { $scope.clients.push({ name: client.name, phone: client.phone, data: new date() }); $scope.clientmodal.hide(); client.name = ""; client.phone = ""; clients.save($scope.clients); }; // open our new task modal $scope.newclient = function() { $scope.clientmodal.show(); }; $scope.closenewclient = function() { $scope.clientmodal.hide(); }; $scope.showactionsheet = function(client){ $ionicactionsheet.show({ titletext: 'azioni', buttons: [ { text: 'cancella selezionato' }, ], destructivetext: 'cancella tutto <i class="icon ion-trash-a"></i>', canceltext: 'annulla', buttonclicked: function(index) { if( index == 0 ) { //e' una delete $scope.clients.splice( $scope.clients.indexof(bet), 1 ); clients.save($scope.clients); } return true; }, //cancella tutto destructivebuttonclicked: function() { //libero l'array $scope.clients = []; clients.save($scope.clients); return true; } }); }; }) .controller('singlectrl', function($scope, $stateparams) { }) everything works great except ion-item click:
<ion-item ng-repeat="client in clients | filter:query" href="#/app/clients/{{ client.name }}"> <!-- <div class="row" on-hold="showactionsheet(client)"> --> {{ client.name }} <!-- </div> --> </ion-item> when click on i'd show new page client info, what's wrong code?
here codepen:http://codepen.io/anon/pen/elaiz
Comments
Post a Comment