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
Related
This is my controller that will fetch all notes for my main page. When I console.log($scope.allNotes) all my arrays are logged but when I render with my HTML only 1 array shows up
exports.allNotesController = function ($scope, $http, $notes) {
$notes.fetchNotes().then(function (result) {
var data = result.data
data.filter(function (notes) {
$scope.allnotes = notes.notes
console.log($scope.allnotes)
})
})
}
my HTML:
<section class="row all-notes">
<h1>All Notes</h1>
<div class="allNotes">
<ul ng-repeat="notes in allnotes">
<li>{{ notes }}</li>
</ul>
</div>
</section>
<a class="btn btn-default" href="#/login">Login</a>
I solved it in a very hacky way.
Heres my new controller
exports.allNotesController = function ($scope, $http, $notes) {
$notes.fetchNotes().then(function (result) {
$scope.allnotes = result.data
})
}
my HTML, this is where the magic happens. lol
<ul ng-repeat="notes in allnotes track by $index">
<li>{{ notes.notes.toString() }}</li> // i had no idea I can use toString() here
</ul>
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)"
On my Ionic App, I have a view that has a button. When you click on the button, a list of player would be served in a modal, when clicked on a player name, the name of the selected player should be shown on the page and the button should be hidden.
Here's the codepen for the same - http://codepen.io/mradul/pen/vNywqG
However, when I select a value(player name) on the modal, the scope variable gets updated(as it's printed on the console), but the change is not reflected on the page.
HTML -
<ion-header-bar class="bar-positive bar-header">
<h1 class="title">Selected Player</h1>
</ion-header-bar>
<ion-content>
<script id="select-player.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">Choose Player</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="player in getPlayerList().players" ng-click="closeModal(player)">
{{player}}
</ion-item>
</ion-list>
</ion-content>
</div>
</script>
<br/><br/>
<div id="player">
{{sc.player}}
<div class="row">
<a class="button" ng-click="openModal()" ng-show="sc.player.playerName == null">Set player</a>
<div ng-hide="sc.player.playerName == null">
<div class="col col-33 " > {{sc.player.playerName}}</div>
</div>
</ion-content>
JS -
angular.module('ionicApp',['ionic']).controller('scoringController', function ($scope, $ionicModal) {
$scope.player = {playerName:""};
$scope.getPlayerList = function () {
console.log("getting player list");
return {
"players": [
"Mradul",
"JAin",
"Phunsuk Wangdu",
"Hulk"
]
};
};
$ionicModal.fromTemplateUrl('select-player.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
})
$scope.openModal = function () {
console.log("Setting model open ");
$scope.modal.show()
}
$scope.closeModal = function (playerName) {
$scope.player.playerName = playerName;
//$scope.activePlayers[0] = playerName;
console.log("Player Set ", $scope);
console.log("model closed");
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
});
Player was initially a primitive(string), but I changed it into an object by having a property - playerName. May be I didn't do it right. Please suggest how can I have the parent scope variable updated correctly. I might have missed something very basic.
Write $scope.$apply() after your change
Try this, Am not sure about it
{{player.playerName}}
Alright, I have an html page that contains an ionic card but when I bind data to its items they are not shown at the browser so what is the problem
<ion-view title="Game" ng-controller="GameCtrl as vm">
<ion-content class="has-header">
<div class="card">
<div class="item">
Home Team
</div>
<div class="item">
{{vm.game.team1}}
</div>
<div class="item">
Score: {{vm.game.team1Score}}
</div>
</div>
<div class="card">
</div>
<div class="card">
</div>
</ion-content>
</ion-view>
and here is the angular controller for this page :
(function () {
'use strict';
angular.module('eliteApp').controller('GameCtrl', ['$stateParams','eliteApi', GameCtrl]);
function GameCtrl($stateParams, eliteApi) {
var vm = this;
var gameId = Number($stateParams.id);
var data = eliteApi.getLeagueData();
vm.game = _.find(data.games,{"id": gameId});
};
})();
I injected the js file to index.html; while tracing the debugging the function is getting data but data is not viewed at the browser so can anybody have some help ?
Try this:
'use strict';
angular.module('eliteApp').controller('GameCtrl', ['$stateParams','eliteApi', function($stateParams, eliteApi){
var gameId = Number($stateParams.id);
var data = eliteApi.getLeagueData();
this.game = _.find(data.games,{"id": gameId});
}]);
Edit
Looks like you're missing a route with a game id. Add this to your .config function:
.state('app.game-detail', {
url: "/game/:id",
views: {
"mainContent":{
templateUrl: "app/game/game.html"
}
}
})
And change your team-detail.html with this:
<a class="item item-icon-right" ng-repeat="game in vm.games"
href="#/app/game/{{game.gameId}}">
It should work now.
I have this code to show loading message.
<ion-view title="Rooms">
<ion-content>
<ion-list ng-show="rooms">
<ion-item class="item-icon-left" ng-repeat="room in rooms" type="item-text-wrap" ng-click="openChatRoom(room.id)">
<i class="icon {{room.icon}}"></i>
<h2>{{room.name}}</h2>
</ion-item>
</ion-list>
<ion-list ng-hide="rooms.length">
<ion-item class="textCenter">
<i class="icon ion-loading-c"></i> Loading Rooms
</ion-item>
</ion-list>
</ion-content>
What it does now is just showing "loading Rooms" for awhile and nothing shows up.
But when I change page and return to this page again, items in ng-show just shows up and never show "loading Rooms" again.
So why this ng-show doesn't reveal instantly? Below are its controllers
.controller('RoomsCtrl', function($scope, Rooms, Chats, $state, $ionicModal) {
//console.log("Rooms Controller initialized");
$scope.rooms = Rooms.all();
console.log($scope.rooms);
$scope.openChatRoom = function (roomId) {
$state.go('app.chat', {
roomId: roomId
});
};
})
.factory('Rooms', function ($firebase) {
// Might use a resource here that returns a JSON array
var ref = new Firebase(firebaseUrl);
var rooms = $firebase(ref.child('rooms')).$asArray();
return {
all: function () {
return rooms;
},
get: function (roomId) {
// Simple index lookup
return rooms.$getRecord(roomId);
}
}
});