I have this issue, work when I opened on web browser but not on my android smartphone.
<ion-list>
<ion-item class="list" >
<a class="item item-thumbnail-left" ng-href="{{x.Adress}}" ng-repeat="x in names|orderBy:'Name'" >
<img ng-src="{{x.Image}}">
<h2>{{x.Name}}</h2>
<p>{{x.Local}}</p>
<p>{{x.Descri}}</p>
</a>
</ion-item>
</ion-list>
.controller('PlaylistsCtrl', function($scope, $http) {
$http.get("patrocinadores.json")
.success(function (response)
{
$scope.names = response;
});
})
Try write Address without interpolation:
For example:
And verify your property name.
Or you can try (not fancy):
<ion-list>
<ion-item class="list" >
<a class="item item-thumbnail-left" ng-click="Open(x.Adress)" ng-repeat="x in names|orderBy:'Name'" >
<img ng-src="{{x.Image}}">
<h2>{{x.Name}}</h2>
<p>{{x.Local}}</p>
<p>{{x.Descri}}</p>
</a>
in your controller:
$scope.Open = function(url){
window.open(url, '_system');
};
Don't forget in your "a" tag you need set target attr to "system" to load or open your link with default system browser instead of embebed ionic view.
I hope this can help you.
Related
I am developing a hybrid application by using Ionic Framework. However, my application failed in double binding when user back to hybrid application. The application able to retrieve Array Object from localstorage but my ngrepeats failed to load the var I assigned from localstorage. The following is my code.
controller.js
.controller('ChatsCtrl', ['$scope','$state', '$ionicTabsDelegate' , '$ionicListDelegate', '$rootScope'
,function($scope,$state,$ionicTabsDelegate, $ionicListDelegate, $rootScope) {
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = channel_list;
}])
HTML File
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom({{'chat.displayName'}}, {{'chat.channelID'}})">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try calling a function on page load that re initialize your list something like this,
Controller.js
$scope.init = function(){
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
}
$scope.init();
And make sure when ever you visit this page this function is fired.
Note: if you are on the same page and wants to rebind the list then call this function in your goBack() or goForward() function where ever required.
Hope this solves your problem.
JS
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
HTML file
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom(chat.displayName,chat.channelID)">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
ng-click="chatRoom(chat.displayName,chat.channelID) Pass value like this.
I have a collapsed model which show more information about client, and insid it, I have a button, when I click, I don't get the informations of the specific client, I get data of all clients
<ion-list ng-repeat="x in names">
<a class="item item-icon-left " >
<i class="icon ion-android-arrow-dropdown-circle" ng-model="collapsed" ng-click="collapsed=!collapsed"></i>
{{x.Marque}}
</a>
<div ng-show="collapsed">
<table>
<thead >
<td>
<label> Code: </label> {{x.CodeClient}} <br/>
<label> Nom: </label> {{x.NomClient}} <br/>
<a class="button button-info" ui-sref="modifClient({CodeClient: x})" >
Enregistrer
</a>
...
app.js
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
modifClient.html
<ion-content class="padding" ng-controller="ConsultClientCtrl" ng-repeat="x in names | filter: {CodeClient: thisX}" >
<ion-list ng-repeat="x in names | filter: {CodeClient: thisX}: true">
<div class="item item-divider center-text" ng-model="CodeClient"> {{x.CodeClient}} </div>
......
You have to use the framework's href: ngHref or ng-click
<a class="button button-info" ng-href="/modifClient"> ...
LE: I've created a pen for this case. The problem is that you have an <a> in <a> and when you click it then it get's confused.
So I've changed the <a ng-show="collapsed"> to <div ng-show="collapsed"> and now works as expected (see pen too).
If you are using Angular ui-router and modifClient is a state in your router, you better use the Angular ui-sref attribute instead of HTML href.
Your code would be :
<a class="button button-info" ui-sref="modifClient">
Edit:
If you want to pass an object param in the ui-sref you can do it like this:
<a class="button button-info" ui-sref="modifClient({CodeClient: x.CodeClient})">
And change your state settings to include a params object:
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
Note:
Note that you should also update your ConsultClientCtrl controller with a $scope.CodeClient variable so it can be updated from the ui-sref.
You can read How to pass parameters using ui-sref in ui-router to controller for further options.
Edit 2:
After reading your last Edit, I can see that you don't have a CodeClient variable in your controller, so update it like this:
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.CodeClient = null;
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
And in your HTML just use:
<div class="item item-divider center-text"> {{CodeClient}} </div>
Without <ion-list ng-repeat ...> and the filter part as we already got the CodeClient variable in the Controller.
Thanks for every one,This is the solution I found:
change the code of the button:
<a class="button button-info" ng-href="#/modifClient/{{x.CodeClient}}" >
Enregistrer </a>
And in app.js, I had to use $state:
app.controller("ConsultClientCtrl", function($scope, $http,$state) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/selectClient.php")
.success(function(data){
$scope.thisX = $state.params.CodeClient;
$scope.names = data;
});
}
});
And changing the state provider to this:
$stateProvider.state('modifClient', {
url: '/modifClient/:CodeClient',
templateUrl: 'templates/modifClient.html',
controller: 'ConsultClientCtrl'
});
I have simple app with a menu on the left with just two options:
When I click on the "Servicios" option I'm loading some categories from my Parse application:
Then, if I click on the "Tablero" option and then again try to go back to "Servicios" option by clicking on the menu, the data doesn't load:
This is my controller:
.controller('ServicesCtrl', function($scope, $state) {
$scope.categories = {};
// Categories
var Category = Parse.Object.extend("Category");
var query = new Parse.Query(Category);
query.equalTo("isActive", true);
query.ascending("name");
query.find({
success: function(categories) {
$scope.categories = categories;
}
});
})
And this is my view:
<ion-view class="services-view" cache-view="false">
<ion-nav-title>
<span>Servicios</span>
</ion-nav-title>
<ion-content>
<ion-list class="list">
<ion-item ng-repeat="category in categories" class="item item-thumbnail-left">
<img src="img/cut.svg">
<h2>
{{ category.get("name") }}
</h2>
<p>
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Do I need to do some extra work for loading again?
this is my first project on the ionic tecnology.Im still learning but Im stuck in one place.In js page, I creating repetitive page for listing films.I want to create one sample structure for ths page.And all films should be repetitive.
movie.picture, movie.title and **movie.rating I added these thigs but I cant get their values on the js and data service sides.Im confuse js and data service parts.I need basic examples :) how can I get those values?(by the way sorry for my bad language )
<ion-view view-title="films" ng-controller="filmlistcontroller">
<ion-content class="padding">
<div class="list" ng-repeat="movie in movies">
<br/>
<br/>
<a class="item item-thumbnail-left" href="#/tab/film">
<img ng-src="{{movie.picture}}" href="#/tab/film">
<h2>movie.title</h2>
<p>movie.rating</p>
</a>
</div>
</ion-content>
</ion-view>
the tutorial for this : Try This
index.html :
<ion-view view-title="films" ng-controller="filmlistcontroller">
<ion-content class="padding">
<div class="list" ng-repeat="movie in movies">
<br/>
<br/>
<a class="item item-thumbnail-left" href="#/tab/film">
<img ng-src="{{movie.picture}}" href="#/tab/film">
<h2>{{movie.title}}</h2>
<p>{{movie.rating}}</p>
</a>
</div>
</ion-content></ion-view>
filmlistcontroller :
.controller('filmlistcontroller', function($scope,$http ) { $http.get('URL')
.success(function (response) {
$scope.movies = response;
console.log("$scope.productInfo :"+JSON.stringify($scope.movies));
}).error(function(){
})});
hope this will help you.
I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})