So here I go with my first question.
I am trying to use ng-repeat to render data from the server, but it's not displaying anything.
this is the code for my controller
.controller('ExampleController', function($scope, $http) {
var url = "https://lari.jumpstart.ge/en/api/v1/commercial_banks?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data) {
$scope.results = data.results;
})
.error(function(data) {
alert("ERROR");
});
});
this is the ng-repeat in my view
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content >
<ion-item ng-controller='ExampleController' ng-repeat='x in results'>
{{x.code}}
</ion-item>
</ion-content>
</ion-pane>
</body>
</html>
this is the array on the server
{
"valid":true,
"results":[
{
"code":"BAGA",
"name":"Bank Of Georgia",
"currencies":[
"AED",
"AMD",
"AUD",
]
},
{
"code":"TBCB",
"name":"TBC Bank",
"currencies":[
"AED",
"AUD",
"AZN",
]
},
The erroneous code has the ng-controller directive on the same node as the ng-repeat directive.
<!-- Replace THIS
<ion-content >
<ion-item ng-controller='ExampleController' ng-repeat='x in results'>
{{x.code}}
</ion-item>
</ion-content>
-->
<!-- With THIS -->
<ion-content ng-controller='ExampleController' >
<ion-item ng-repeat='x in results'>
{{x.code}}
</ion-item>
</ion-content>
The ng-repeat directive needs to be on a child node from the ng-controller.
$http returns a promise though. check the error in the console and see what it says. Look into moving the code in the controller into a factory/service and then assign, whatever value this controller or service returns, to the $scope
If the example you give of the array on your server is correct, then all you need to do is change $scope.results = data.results; to $scope.results = data.results.results;, because otherwise it will not be able to iterate over the array of your response data. On the other hand, if that doesn't work, try changing {{x.code}} to {{x}} to see what the output is.
Related
Hi i am new to ionic and angular. onclick of ion-item i need an index and i want to show accordion(collapse and expand). How can i achieve that
<ion-list class="ion-navicon" show-reorder="true"
can-swipe="listCanSwipe">
<ion-item data-ng-repeat="item in items track by $index" data-ng-click="service($index)" class="item-thumbnail-left">
<ion-reorder-button class="ion-navicon"
on-reorder="moveItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
<div class="{{item.name}}"></div>
</ion-item>
</ion-list>
</ion-content>
Below is my controller
var myApp = angular.module('myApp',[]);
myApp.controller('reorderCtrl',
[
'$scope',
function($scope) {
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
$scope.service= function(index){
console.log(index)
}
$scope.items = [{name : jai},{name : saurabh},{name : kamesh},{name : vijay},{name : ravi}];
}])
This worked for me, hopefully it'll work for you:
<ion-list show-reorder="true">
<ion-item class="enable-pointer-events" ng-re....otherGloriousStuff>
<ion-list>
I fixed that with this in the css.
.disable-pointer-events{
pointer-events: all;
}
Hope it works for you.
The issue is that the ng-repeat directive has it's own scope. That scope does not have the service method that you have defined.
You can use reorderCtrl as ctrl syntax to import the controller. This would allow you to call the method in that controller using,
reorderCtrl.service()
Please refer this question as well: Ng-click doesn't work inside ng-repeat
I'm new in AngularJs. I retrieve data(from json array) on my first page, and what I want to do is when I click on one item of my list it sends me on my second page which display the current id, date, amount and category. But I don't know how to do to display the current id, date, amount and category.
Here is my controller :
.controller('RegistreCtrl', function ($scope, $stateParams,factotransaction,$state) {
console.log("coucou");
var mytoken = sessionStorage.getItem('token');
factotransaction.send(mytoken).then(function(conf){
console.log(conf);
$scope.datab = conf.data;
})
$scope.operation = function(){
$state.go('app.operation');
}
})
.controller('OperationCtrl', function ($scope, $stateParams,factotransaction) {
var mytoken = sessionStorage.getItem('token');
factotransaction.send(mytoken).then(function(conf){
console.log(conf);
$scope.datab = conf.data;
})
})
and my view for first page:
<ion-view view-title="Registre">
<ion-content>
<h1>Registre</h1>
<ul class="list" ng-repeat="item in datab track by $index">
<li class="item" ng-repeat="mytitle in item.assignation" ng-click="operation()">
{{item.date | myDate}}--
{{mytitle.category}}--{{mytitle.amount}}€
</li>
</ul>
</ion-content>
</ion-view>
and view of second page (almost empty for now):
<ion-view view-title="Registre">
<ion-content>
<h1>Operation</h1>
<div class="card">
</div>
</ion-content>
</ion-view>
Do you have any idea of how can I manage that?
<ion-view view-title="Registre">
<ion-content>
<h1>Registre</h1>
<ul class="list" ng-repeat="item in datab track by $index">
you can try to pass some sort of indicator with the operation function, id maybe?
<li class="item" ng-repeat="mytitle in item.assignation" ng-click="operation(item.id)">
{{item.date | myDate}}--
{{mytitle.category}}--{{mytitle.amount}}€
</li>
</ul>
</ion-content>
</ion-view>
then here,
$scope.operation = function(id){
$state.go('app.operation', { id: id });
}
not sure about the syntax, but check please. so now you have an id you can play with.
in the controller,
.controller('OperationCtrl', function ($scope, $stateParams,factotransaction) {
var mytoken = sessionStorage.getItem('token');
factotransaction.send(mytoken).then(function(conf){
console.log(conf);
conf.data.forEach(function(item){
if($stateParams.id === item.id) {
$scope.item = item;
}
});
});
})
then just use that $scope.item in your template code
I have got items from a JSON file and send them to my $scope:
//JS controller
.controller('MyController', function($scope, $log) {
$http.get('JSON_FILE_URL').success(function(response){
$scope.responseData = response;
$scope.items = rundom(response);
});
$scope.refresh = function(data) {
$log.log('refresh data :'+data);
$scope.items = rundom(data);
};
}
// view.html
<ion-view view-title="myTitle" ng-controller="MyController">
<button ng-click="refresh({{responseData}})">refresh</button>
<ion-content overflow-scroll="true" padding="true" ng-cloak class="fullPage">
<div class="item item-text-wrap" ng-repeat="item in items">
<h1>{{ item['title'] }}</h1>
</div>
//some code here
</ion-content>
</ion-view>
I have inspect element on html, the items are there inside my function.
<button ng-click="refresh({"id": 0, "title": "title 0"},{"id": 1, "title": "title 1"})">refresh</button>
when I click on the button to refresh, nothings happens, but
I got undefined on logs: refresh data :undefined
Is it a type question which I didn't take into consideration?
You don't need to use angle brackets in the ng-click.
ng-click="refresh()"
It can access $scope anyway inside the function so there's no need to pass it
The Olivier's answer is correct: ng-click="refresh(responseData)"
I have an ionic & angular based project. I get variable node from a service. node's body value is HTML. But when I print {{node.body.und[0].value}} with ionic, it prints HTML codes with tags like <ul><li><strong>Title:</strong> some text</li><ul>
Controller and service part of the code:
.controller('NodeCtrl', function($scope, $stateParams, Node) {
$scope.node = Node.get({nid: $stateParams.nid});
});
.factory('Node', function ($resource) {
return $resource('some-domain.com/api/node/:nid'+'.json');
})
Ionic template:
<ion-view view-title="{{node.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h2>{{node.title}}</h2>
</div>
<div class="item item-body">
{{node.body.und[0].value}}
</div>
</div>
</ion-content>
</ion-view>
How can I make ionic print {{node.body.und[0].value}} as HTML instead of with HTML tags like <ul><li><strong>Title:</strong> some text</li><ul>?
All Credits to Will.Harris!!
ng-bind-html, is what you are looking for.
From the Docs, use the ng-bind-html in the view as:
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
and in the controller, assign the scope variable with the html content as:
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}]);
i need to use a ionic slide box to show some images in my application. I used ionic slide box it does not seem to work with a ng-repeat.
this is my html part
<ion-view title="Promotions" ng-controller="PromotionsCtrl">
<ion-content class="has-header" scroll="true" padding="true">
<ion-slide-box>
<ion-slide ng-repeat="obj in promotions">
<img ng-src= {{obj.img}}>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
my controller
.controller('PromotionsCtrl', function($scope, $http, $window, $ionicSlideBoxDelegate,$interval) {
$http.get( 'http://******.com/B*****/service2.php?q=promotions', { cache: true})
.then(function(res){
$scope.promotions = res.data['top'];
$ionicSlideBoxDelegate.update();
});
})
You have to use update() if you are using ng-repeat with slideboxes.
See here:
http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/
The newer version .rc4 of ionic updates the slide box on its own. Try updating your Ionic Lib.
This is my sample,the slide works,but when the delegate-handler updated,the parameter of the "does-contunue" can't work,I'm Still looking for a solution...
html:
<ion-slide-box on-slide-changed="slideHasChanged($index)" does-continue="true" auto-play="true" delegate-handle="image-viewer" style="height:30%;">
<ion-slide ng-repeat="slide in slideList">
<div class="box" style="background-image: url('{{slide.url}}');background-size:100% 100%;></div>
</ion-slide-box>
controller:
angular.module("myApp.controllers", ["myApp.services"])
.controller("myController", function ($scope, $ionicSlideBoxDelegate, myService,$timeout) {
$timeout(function(){
var slideList = myService.getSlides();
$scope.slideList = slideList;
$ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
},2000)
})
service:
angular.module("myApp.services", [])
.factory("myService", function () {
return{
getSlides: function () {
var slideList = new Array();
slideList.push("imgs/a.jpg");
slideList.push("imgs/b.jpg");
slideList.push("imgs/c.jpg");
return slideList;
}
}
})
As #Karan said, the update is call by itself. But there is still some problems. As mentioned in the issue, you can disable the slider if the data is not ready. Then everything will be fine.