My controller:
.controller('ECtrl', function($scope, EService){
$scope.events = []; // init events as empty array
EService.getAll().then(function (response) {
$scope.events = response;
console.log($scope.events);
$scope.doRefresh = function() {
$scope.events.push('Incoming todo ' + Math.random());
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply()
};
})
console : Uncaught TypeError: $scope.events.push is not a function
{{ event.conteudo }}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
I already tried to solve this problem but til now nothing
so I want to know How can bind the $scope.events from my controller with a doRefresh() function?
please I need a example code.
thanks
In your template put it inside
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"></ion-refresher>
In conteroller
$scope.doRefresh = function() {
// here refresh data code
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply()
};
more info
Related
Hello i have the following code and i want to show the objects that the api returns in to my html but i am drawing a blank on this, also i want to make a filter to sort by id.
angular.module('MainApp').controller('PhoneController', function ($scope, $http) {
$scope.home = "This is the homepage";
$scope.getRequest = function () {
console.log("I've been pressed!");
$http.get("http://api.myjson.com/bins/12qiaa")
.then(function successCallback(response) {
$scope.response = response;
console.log(response.data.galerija);
var row0 = response.data.galerija[0];
var row1 = response.data.galerija[1];
var row2 = response.data.galerija[2];
var row3 = response.data.galerija[3];
var row4 = response.data.galerija[4];
var row5 = response.data.galerija[5];
}, function errorCallback(response) {
console.log("Unable to perform get request");
});
};
To populate your html you will have to bind your modal to the view. Angular uses handlebar syntax.
First thing is to declare your model, let's say $scope.galerijas, then after your $http GET request you will populate response to your $scope.galerijas model.
Finally we will use ng-repeat to loop over $scope.galerijas and bind it to the view. A filter | is used to order the displayed results by id.
Sample Html
<div ng-app="MainApp" ng-controller="PhoneController">
<h2>{{ home }}</h2>
<ul>
<li ng-repeat="x in galerijas | orderBy:'id'">
<figure class="figure">
<img src="{{ x.slika }}" class="figure-img img-fluid rounded" alt="{{ x.naziv }}">
<figcaption class="figure-caption text-right">{{ x.naziv }}</figcaption>
</figure>
</li>
</ul>
<button type="button" ng-click="getRequest()">Get Galerija</button>
</div>
Sample Script
var app = angular.module("MainApp", []);
app.controller("PhoneController", function($scope, $http) {
$scope.home = "This is the homepage";
$scope.galerijas = []; // This will hold all our galerija after ajax request;
$scope.getRequest = function() {
console.log("I've been pressed!");
$http.get("https://api.myjson.com/bins/12qiaa")
.then(function successCallback(response) {
console.log(response.data.galerija);
$scope.galerijas = response.data.galerija; // populate from api;
}, function errorCallback(response) {
console.log("Unable to perform get request");
});
console.log($scope.galerijas);
}
});
And here is an example fiddle: https://jsfiddle.net/tbxmfarz/3/
I'm programming for a college assignment and I've got no idea what I did wrong, so looking for pointers here.
So I'm trying to access events from a database and display them as thumbnails. Where am I going wrong?
HTML Code:
<div class="col-sm-6 col-md-3" ng-repeat="event in EventCtrl.events" ng-controller="EventController as EventCtrl">
<div class="thumbnail tile tile-medium">
<a href="#" data-toggle="modal" data-target="#view-event-modal">
<img id = "eventImg" src="/img/sports.png" alt="Sports">
</a>
</div>
Angular Controller:
angular.module('EventCtrl', []).controller('EventController', function($http) {
$http.get("/events")
.then(function(response) {
this.events = {}
this.events = response.data;
});
});
Node function:
app.get('/events', function(req, res){
eventData = Event.find({}).toArray();
res.render('events', eventData);
});
Your controller should manipulate the $scope, and your view should interact with the scope.
Why don't try something like that
angular.module('EventCtrl', []).controller('EventController', function($scope, $http) {
$http.get("/events").then(function(response) {
$scope.events = response.data;
});
});
I am working with Ionic and the api of The Movie Database. I wrote a service to make my http request which comes back all good. I get all my outputs in the console.log but for some reason I am still not able to show the data in the view. So I was wondering if I am doing it wrong when it comes to 2 way databinding
Code of my service:
angular.module('starter.services', [])
.service('HotMoviesService', function($http, $q){
var final_url = "https://api.themoviedb.org/3/movie/popular?api_key=XXXX";
var self = {
'hotMovies' : [],
'loadHotMovies' : function() {
var d = $q.defer();
$http.get(final_url)
.success(function success (data){
console.log(data);
self.hotMovies = data.results;
d.resolve('The promise has been fulfilled');
})
.error(function error (msg){
console.error("There was an error retrieving the data " , msg);
d.reject("The promise was not fulfilled");
});
return d.promise;
}
};
return self;
});
My controller.js code:
angular.module('starter.controllers', ['ionic.contrib.ui.hscrollcards', 'starter.services'])
.controller('StartCtrl', function($scope, $http, HotMoviesService) {
$scope.hotmovies = [];
HotMoviesService.loadHotMovies().then(function success (data){
console.log(data);
$scope.hotmovies = HotMoviesService.hotmovies;
},
function error (data){
console.log(data)
});
})
My html code:
<ion-view view-title="The Movie Bank">
<ion-content class="background">
<h1 class="padding titleStart">Welcome to The Movie Bank</h1>
<div class="logo"></div>
<!-- HOT -->
<a class="customHref" href="#/app/hot">
<h1 class="padding customH1">Hot</h1>
</a>
<hscroller>
<ion-scroll direction="x" scrollbar-x="false">
<hcard ng-repeat="hotmovie in hotmovies">
<a href="#/app/hot/{{hotmovie.id}}">
<img ng-src="http://image.tmdb.org/t/p/w92/{{hotmovie.poster_path}}" >
</a>
</hcard>
</ion-scroll>
</hscroller>
</ion-content>
</ion-view>
Here is a screenshot of my console, as you can see everything works fine:
You need hotMovies, note the "m" case:
$scope.hotmovies = HotMoviesService.hotMovies;
I'm getting some problem getting the results from my api server with angularjs.
This is my code:
home.html (view)
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
Orders!
</div>
<ul>
<li ng-repeat="order in orders">{{order}}</li>
</ul>
main.js (controller)
app.controller('mainController', function($scope, $http) {
$scope.message = 'Everyone come and see how good I look!';
$scope.orders = [];
$scope.getOrders = function(){
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
}
});
When I click the button, I can see the results in the console, but not in the list.
If use this code in the controller, it works when it loads, and when I click the button:
app.controller('mainController', function($scope, $http) {
$scope.message = 'Everyone come and see how good I look!';
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
$scope.getOrders = function(){
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
}
});
What is the problem ?
Thanks!
Seems like you were using ngRoute and you have href="#" in your anchor, which leads you redirection to blank page, Keep href="" will help you in css to show pointer: cursor; on hover of it
Button
Orders!
Thanks everybody for your help.
The problem was the link in the view...
Orders!
would be:
<a ng-click="getOrders()">Orders!</a>
im currently working in ionic framework with inappbrowser but any time i open the external url link it open another broswer but i want it indicate loading spinner so users will know it is loading, i dont know want it to open with system browser
<div class="list">
<a class="item item-avatar" href="#" ng-click="loadData()" onclick="window.open('http://www.mysite', '_blank', 'location=yes'); return false; ">
<img src="img/be1.png">
<h2>site here</h2>
</a>
</div>
and my controller
.controller('MyCtrl', function($scope, $ionicLoading, $timeout) {
$scope.myTitle = 'Loading Sample';
$scope.loadingIndicator;
$scope.counter = 0;
$scope.loadData = function() {
$scope.loadingIndicator = $ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>'
});
$timeout(function() {
$ionicLoading.hide();
}, 1500);
};
})
thanks
In loadData() itself add
var ref=window.open('http://www.mysite', '_blank', 'location=no');
(location=no to hide url bar)
ref.addEventListener('loadstart', function() { $ionicLoading.show() });
ref.addEventListener('loadstop', function() { $ionicLoading.hide() });