I've got the following code
Check on codepen
<html ng-app="optik">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menu query replication</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<body ng-controller='ContentController'>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
<div class="h1 title"> Ionic Optik! </div>
<button class="button button-icon icon ion-more" ng-click="console.log('clickie')"></button>
</ion-header-bar>
<ion-content has-header="true">
<input type="text" placeholder="Nombre" ng-model="query.test" />
<h3> Hola {{query.test}}</h3>
<!--
<ion-list>
<ion-item ng-repeat="cliente in clientes">
{{cliente.nombre}}
</ion-item>
</ion-list>
-->
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left" expose-aside-when="large">
<ion-header-bar class="bar bar-header bar-stable">
<div class="h2 title"> Busqueda </div>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<label class="item item-input">
<input type="text" placeholder="Nombre" ng-model="query.nombre" />
</label>
<label class="item item-input">
<input type="text" placeholder="Ciudad" />
</label>
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="meses" min="0" max="12" />
<i class="icon ion-volume-high"></i>
</div>
</ul>
<h3>{{query.nombre}}<h3>
<h3>Hola {{query.test}}</h3>
<h3>{{texto}}</h3>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
Js file
angular.module('optik', ['ionic']);
angular
.module('optik')
.controller('ContentController', ContentController);
ContentController.$inject = ['$scope', '$ionicSideMenuDelegate'];
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
It includes a text input inside side view with ng-model='query.nombre'. It updates a {{query.nombre }} inside the sidenav but not one on the Right pane. Any idea what the issue might be?
Your problem is that $scope.query is undefined into your controller.
Therefore $scope.query.test is not working.
Add this the your controller definition : $scope.query={}
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.query={}
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
Related
I turn to you for a small flaw that I have. I used modal-select to select an item from a list.
The element I need for the query is the id of the element. What is operational, with this code :
<div class="item item-body">
<a class="button button-positive" modal-select="" ng-model="form.product" options="Product" option-property="id" modal-title="Select an product" has-search="true">
Select it (with search)
<div class="option">
{{option.name}}
</div>
</a>
<div class="item">
Product : {{form.product}}
</div>
</div>
But on display, client side, I would like to have the name of the element and not the id, because for now it is the id that appears in :
<div class="item">
Product : {{form.product}}
</div>
And even if I do form.product.name
I was inspired by this:
angular.module('starter', ['ionic', 'ionic-modal-select'])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.selectables = [
1, 2, 3
];
$scope.longList = [];
for(var i=0;i<1000; i++){
$scope.longList.push(i);
}
$scope.selectableNames = [
{ name : "Mauro", role : "black hat"},
{ name : "Silvia", role : "pineye"},
{ name : "Merlino", role : "little canaglia"},
];
$scope.someSetModel = 'Mauro';
$scope.getOpt = function(option){
return option.name + ":" + option.role;
};
$scope.shoutLoud = function(newValuea, oldValue){
alert("changed from " + JSON.stringify(oldValue) + " to " + JSON.stringify(newValuea));
};
$scope.shoutReset = function(){
alert("value was reset!");
};
}])
.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();
}
});
})
<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="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<style>
.option-selected{
background-color: #ccc !important;
}
</style>
<!-- ionic/angularjs js -->
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
<script src="https://rawgit.com/inmagik/ionic-modal-select/master/dist/ionic-modal-select.js"></script>
</head>
<body ng-app="starter" ng-controller="MainCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic modal select example</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
List of numbers.
</div>
<div class="item item-body">
<button class="button button-positive" modal-select="" ng-model="someModel" options="selectables" modal-title="Select a number">
Select it
<div class="option">
{{option}}
</div>
</button>
<button class="button button-positive" modal-select="" ng-model="someModel" options="selectables" modal-title="Select a number" has-search="true">
Select it (with search)
<div class="option">
{{option}}
</div>
</button>
</div>
<div class="item">
someModel: {{someModel}}
</div>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
Long list of numbers rendered with collection-repeat and custom header and footer set.
</div>
<div class="item item-body">
<button class="button button-energized" modal-select="" ng-model="someOtherModel" options="longList" modal-title="Select a number" header-footer-class="bar-positive">
Select it
<div class="option">
{{option}}
</div>
</button>
<button class="button button-energized" modal-select="" ng-model="someOtherModel" options="longList" modal-title="Select a number" header-footer-class="bar-positive" has-search="true" sub-header-class="bar-positive">
Select it (with search)
<div class="option">
{{option}}
</div>
</button>
</div>
<div class="item">
someOtherModel: {{someOtherModel}}
</div>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
List of objects with model bound to the option object
</div>
<div class="item item-body">
<button class="button button-royal" modal-select="" ng-model="someObjModel" options="selectableNames">
Select it
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
<button class="button button-royal" modal-select="" ng-model="someObjModel" options="selectableNames" has-search="true">
Select it (with search)
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
</div>
<div class="item">
someUnSetModel: {{someObjModel}}
</div>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
List of objects and model bound via `option-property` attribute. The initial value for this model is already set in the controller.
</div>
<div class="item item-body">
<button class="button button-assertive" modal-select="" ng-model="someSetModel" options="selectableNames" option-property="name">
{{ someSetModel || 'Select it'}}
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
<button class="button button-assertive" modal-select="" ng-model="someSetModel" options="selectableNames" option-property="name" has-search="true">
{{ someSetModel || 'Select it'}} (searchable!)
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
</div>
<div class="item">
someSetModel: {{someSetModel}}
</div>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
List of objects and custom getter function.
</div>
<div class="item item-body">
<button class="button button-dark" modal-select="" ng-model="someThirdModel" options="selectableNames" option-getter="getOpt(option)" modal-title="Select">
Select it
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
<button class="button button-dark" modal-select="" ng-model="someThirdModel" options="selectableNames" option-getter="getOpt(option)" modal-title="Select" has-search="true">
Select it - with search
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
</div>
<div class="item">
someThirdModel: {{someThirdModel}}
</div>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
Selection and reset callbacks
</div>
<div class="item item-body">
<button class="button button-dark" modal-select="" ng-model="someFourthModel" options="selectableNames" on-select="shoutLoud(newValue, oldValue)" on-reset="shoutReset()" modal-title="Select">
Select it
<div class="option">
<h2>{{option.name}}</h2>
<p>{{option.role}}</p>
</div>
</button>
</div>
<div class="item">
someFourthModel: {{someFourthModel}}
</div>
<div class="item item-body">
<p>
Repeat expression with filter
</p>
</div>
<label class="item item-input">
<span class="input-label">Filter</span>
<input type="text" ng-model="externalFilter">
</label>
<div class="item item-body">
<button class="button button-dark" modal-select="" ng-model="someSixthModel" options-expression="person in selectableNames | orderBy:'role' | filter : externalFilter" modal-title="Select">
Select it
<div class="option">
<h2>{{option}}</h2>
</div>
</button>
<button class="button button-dark" modal-select="" ng-model="someSixthModel" options-expression="person in selectableNames | orderBy:'role' | filter : externalFilter" modal-title="Select" has-search="true">
Select it
<div class="option">
<h2>{{option}}</h2>
</div>
</button>
</div>
<div class="item">
someSixthModel: {{someSixthModel}}
</div>
</ion-content>
</ion-pane>
</body>
</html>
http://codepen.io/bianchimro/pen/epYYQO?editors=101
Here is a small diagram of what I would like as a result :
I will then need the id of the product in a search form, where this id in form.product will be in parameter.
<a class="button button-positive button-block" ng-disabled="isValid()" ng-click="search()">Search</a>
In my controller :
$scope.search = function () {
AppService.searchProduct($scope.form).then(function(response){
$scope.listProduct = response;
});
};
This is where I blocked ^^
Because if I use my search function, it will take in parameter the id and the name of the product
Thank you in advance for your answers
You can just get it as a property.. like if selected (assuming your ng-model) is {"name": "London", id: 2}, you use it like selected.id instead of selected directly.
Find the working example of that in the below code snippet! (Or a forked codepen if you prefer)
Notice how I have array that has objects like this:
{
name: "Paris",
id: 1
}
And, we pass it as options to your modal-select. Now, we use it like,
<div class="option">
{{option.name}}
</div>
Finally, outside, we access it like someModel: {{someModel.id}} where someModel being your ng-model.
angular
.module("starter", ["ionic", "ionic-modal-select"])
.controller("MainCtrl", [
"$scope",
function($scope) {
$scope.selectableNames = [{
name: "Paris",
id: 1
},
{
name: "London",
id: 2
},
{
name: "Milan",
id: 3
}
];
}
])
.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();
}
});
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<style>
.option-selected {
background-color: #ccc !important;
}
</style>
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
<script src="https://rawgit.com/inmagik/ionic-modal-select/master/dist/ionic-modal-select.js"></script>
</head>
<body ng-app="starter" ng-controller="MainCtrl">
<ion-pane>
<ion-content>
<div class="item item-divider"></div>
<div class="item item-text-wrap">
List of numbers.
</div>
<div class="item item-body">
<button class="button button-positive" modal-select="" ng-model="someModel" options="selectableNames" modal-title="Select a number">
Select it
<div class="option">
{{option.name}}
</div>
</button>
</div>
<div class="item">
someModel: {{someModel.id}}
</div>
</ion-content>
</ion-pane>
</body>
</html>
EDIT: If your search only takes id and not the whole object, you can remap it like this:
$scope.search = function () {
var myform = angular.copy($scope.form);
myform.product = myform.product.id;
AppService.searchProduct(myform).then(function(response){
$scope.listProduct = response;
});
};
Here is my controller:
$scope.professionList = [];
$scope.searchText = '';
$scope.$on('$ionicView.enter', function() {
PeopleSearchService.setSearchParams(undefined);
})
$scope.$on('$ionicView.loaded', function() {
$scope.professionList = Constants.professionList();
})
I have this simple html
<div class="bar bar-header item-input-inset bg-white" ng-if="showSearchBox">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="searchText">
</label>
<button class="button button-icon icon ion-ios-close-empty" ng-click="toggleSearchBox()"></button>
</div>
<div class="list">
<a class="item item-icon-right" ng-repeat="(id, profession) in professionList | filter:searchText" ui-sref="app.search-people({'professionId': profession.id})">{{profession.name}}<i class="icon ion-ios-arrow-right"></i></a>
</div>
Inside controller i have
$scope.searchText = '';
Typing anything in text box not filtering the list.
Here searchText input present inside ng-if="showSearchBox", which is why it put searchText scope variable inside childScope of ng-if element(ng-if/ng-repeat does create prototypically inherited child scope).
To avoid such kind of issues, always do follow Dot Rule while defining model's or controllerAs pattern to avoid scoping related issue.
Dot Rule
<div class="bar bar-header item-input-inset bg-white" ng-if="showSearchBox">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="model.searchText">
</label>
<button class="button button-icon icon ion-ios-close-empty" ng-click="toggleSearchBox()"></button>
</div>
<div class="list">
<a class="item item-icon-right" ng-repeat="(id, profession) in professionList | filter: model.searchText" ui-sref="app.search-people({'professionId': profession.id})">{{profession.name}}<i class="icon ion-ios-arrow-right"></i></a>
</div>
Similar answer
How about something like that
angular.module('ionicApp', ['ionic', 'sampleController'])
angular.module('sampleController', [])
.controller('sampleController', function($scope, $ionicScrollDelegate) {
$scope.sampleData = [{
'id': '1',
'profession': 'Teacher'
}, {
'id': '2',
'profession': 'Software Developer'
}, {
'id': '3',
'profession': 'Graphic Designer'
}];
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
<script src="https://code.ionicframework.com/0.9.22/js/ionic.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="sampleController">
<header-bar title="'Filtering'" type="bar-positive"></header-bar>
<content has-header="true" padding="true" scroll="false">
<div style="height:250px">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="searchText">
</label>
<scroll direction="y">
<ul class="list">
<li ng-repeat="data in sampleData | filter:searchText">{{data.profession}}</li>
</ul>
</scroll>
</div>
</content>
</body>
</html>
So, I have a code pen link here: http://codepen.io/anon/pen/oXwZmr
In that, they combined all the templates in index.html (tabs.html, mainContainer.html, entry.html, ...) and all controllers of template pages in js file(MainController, TabsPageController, ...).
I wanted to keep all things separate, so i did like index.html, mainController.html mainController.js, tabs.html, tabs.js, app.js.
The codepen works perfectly. But I am getting problem. My Content is going behind tabs.
index.html
<html ng-app="DroidRestClient">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Droid Rest Client</title>
<!-- <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet" type="text/css"/>
<!--ionic/angularjs js-->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="templates/mainContainer/mainContainer.js" type="text/javascript"></script>
<script src="templates/tabs/tabs.js" type="text/javascript"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
angular.module('DroidRestClient', ['ionic', 'DroidRestClient.mainController', 'DroidRestClient.tabsPageController'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url : '/main',
templateUrl : 'templates/mainContainer/mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs/tabs.html',
controller : 'TabsPageController'
}
}
});
$urlRouterProvider.otherwise('/main/tabs');
}]);
mainContainer.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="main">
</ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Settings</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
mainContainer
angular.module('DroidRestClient.mainController', ['ionic'])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
};
}]);
tabs.html
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Request" icon-off="ion-ios-cloud-upload-outline" icon-on="ion-ios-cloud-upload">
<ion-content has-header="true" padding="true">
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-divider item-button-right">
Url
</div>
<label class="item item-input">
<input type="text" placeholder="enter url">
</label>
<div class="item item-divider item-button-right">
Method
</div>
<label class="item item-input">
<div class="input-label">
Method
</div>
<select>
<option selected>GET</option>
<option>POST</option>
<option>PUT</option>
<option>DELETE</option>
</select>
</label>
<div class="item item-divider item-button-right">
Parameters
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No parameters
</div>
</div>
<div class="item item-divider item-button-right">
Headers
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No headers
</div>
</div>
<div class="item item-divider item-button-right">
Body
</div>
<label class="item item-input">
<textarea placeholder="enter body"></textarea>
</label>
</div>
</form>
</ion-content>
</ion-tab>
<ion-tab title="Response" icon-off="ion-ios-cloud-download-outline" icon-on="ion-ios-cloud-download">
<ion-content has-header="true" padding="true">
<h2>Response</h2>
</ion-content>
</ion-tab>
</ion-tabs>
tabs.js
angular.module('DroidRestClient.tabsPageController', ['ionic'])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}]);
Give class="has-header" to ion-content.
<ion-content class="has-header">
</ion-content>
And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.
Add has-header="true" in tabs.html
in example; <ion-view title="{{navTitle}}" has-header="true" left-buttons="leftButtons">
I was also facing the same issue and it worked for me.
I'm trying to learn ionic framework, and I have been reading routing side of things and this is were I am getting a little stuck.
I had my app working, but now I want to add more views. So, I have started by putting my home view in a state called 'home' (sorry if i am not using the correct terminology).
Ok here is my html:
<!DOCTYPE html>
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Venues</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</div>
<h1 class="title">Venues</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<ion-view nng-controller="MyCtrl" title="home">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items">
<a href="#/venue/{{ item[0].id }}">
<div class="list card">
<div class="item item-avatar">
<img src="{{ item[0].profile_pic }}">
<h2 class="item-venue-title">{{ item[0].name }}</h2>
<p class="item-location">UK</p>
</div>
<div class="item item-body">
<img class="full-image" src="{{ item[0].heder_img }}">
</div>
</a>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</ion-view>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
<a class="tab-item">
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>
<i class="icon ion-leaf"></i>
</a>
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
</nav>
</ion-pane>
</body>
</html>
I have added the following to the .js file
var example=angular.module('ionic.example', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/home');
});
What I don't understand is how do you say this is the 'first' view so to speak.
Any advice would be appreciated.
the section
$urlRouterProvider.otherwise('/home');
would define the index route so in this case /home would be the first page.
The content of home.html is rendered inside the ion-nav-view, see below
<body ng-app="quote">
<!-- where the initial view template will be rendered -->
<div ng-controller="AppCtrl">
<ion-nav-view></ion-nav-view>
</div>
</body>
and the content for home.html goes inside the ion-content tag, see below
<ion-view title="your title">
<ion-content>
your content here
</ion-content>
</ion-view>
I done it by
<script type="text/ng-template" id="home.html">
<ion-view nng-controller="MyCtrl" title="home">
<!--content here--!>
</ion-view>
</script>
and in the js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/');
});
I need to open a new page when an item is touched but I'm not able to make it work and I have no idea why.
This is my 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 will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your 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 is my app.js
// Clients App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
/* Costruttore */
.factory('Clients', function(){
return{
all: function(){
//Recupero tutti i clienti
var clientsString = window.localStorage['clients'];
//Se ci sono dati
if( clientsString ){
//Restituisco i 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 and load the Modal
$ionicModal.fromTemplateUrl('new-client.html', function(modal) {
$scope.clientModal = modal;
},
{
scope: $scope,
animation: 'slide-in-up'
}
);
// Called when the form is 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 the 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 I click on it I'd like to show a new page with the client info, what's wrong with my code?
Here a codepen:http://codepen.io/anon/pen/ElAIz
Instead href you should use ui-sref from ui.router.
Example:
ui-sref="app.clients({clientName:client.name})"