We Keep Coding

$state.go doesn't pass parameters

This is the part of my HTML:
<td>
<button class="btn btn-primary" ui-sref="edit({id: v.customerId})" ui-sref-opts="{reload: true}">Edit</button>
<button class="btn btn-primary" ng-click="removeRow(v.firstName);">Delete</button>
</td>
as you can see I am passing the customerId as and id to be one of the parameters displayed in the url
app.js:
var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('edit', {
name: 'edit',
url: '/users/:id/edit',
templateUrl: './views/customer-details.html',
controller: 'ctrl',
params: {
obj: null
}
});
});
ctrl.js:
//If 'initData' isn't set, then set it up by default
if(!localStorage.getItem('initData')) {
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
$scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
for (var i = 0; i < $scope.retrievedData.length; i++) {
$scope.retrievedData[i].birthdayDate = new Date().getFullYear() - new Date($scope.retrievedData[i].birthdayDate).getFullYear();
}
$scope.sortedType = 'firstName';
$scope.sortedReverse = false;
//Remove Rows and Update localStorage Key Values
$scope.removeRow = function(name) {
var index = $scope.retrievedData.findIndex(function(obj) {return obj.firstName === name});
$scope.retrievedData.splice(index, 1);
window.localStorage.setItem('initData', JSON.stringify($scope.retrievedData));
};
$state.go('edit', {obj: $scope.retrievedData});
So I a table, and when users clicks on 'edit', I need THAT object to be passed to the ui.router so I can display it in customer-details.html. How can I do it? I am doing something wrong here. I have read all the documentation on ui.router but do not know should $state.go be defined in the initial controller or in some other. Also I've followed this question, but couldn't get it to work: How to pass custom data in $state.go() in angular-ui-router?

In your edit state you have two parameters, id and obj, one of which inside the url.
But when you trigger the state from your controller you are not passing the id parameter and you did not define a default value
$state.go('edit', {obj: $scope.retrievedData});
try adding it inside your params object
params: {
obj: null,
id: null
}
EDIT:
to answer your further question:
<button class="btn btn-primary" ng-click="handleItem(v);">Go to Edit state</button>
$scope.handleItem = function(item){
//here extract your item specific data from $scope.retrievedData then change the state
var itemData = getItemData(item, $scope.retrieveData);
$state.go('edit', {obj: itemData});
}

Hi you are not using controller, if you want to pass parameters to $state.go() you should have controller to get that value in particular state.
app.js
var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('edit', {
name: 'edit',
url: '/users/:id/edit',
templateUrl: './views/customer-details.html',
controller: 'myController',
params: {
obj: null
}
});
});
in Controller
function myController($state) {
conrole.log($state.params.obj);
}

Detail Page View not Showing Data in ionic

I'm new to Ionic. I write code for list. List is working perfectly but when click on any list-item it's not showing any data.
It showing me this error "Cannot GET /pilliondetails/1" how can i solve this?
app.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
console.log(savedData);
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
})
PillionList Controller:
.controller('PillionListCtrl',function($scope,$ionicHistory,myService){
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
$scope.pillions = [];
var promise=myService.get();
$scope.pillions=myService.get();
})
PillionDetail Controller:
.controller('PillionDetailCtrl',function($scope, $ionicHistory, $stateParams, myService)
{
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
var promise=myService.get($stateParams.requestId);
console.log(promise);
})
PillionList.html :Showing list pf Pillions
<ion-list>
<ion-item data-ng-repeat="pillion in pillions">
<div class="list list-inset">
{{pillion.request_departure_date}}-{{pillion.request_departure_time}}
{{pillion.request_from}} >> {{pillion.request_to}}
{{pillion.user_first_name}} {{pillion.user_last_name}}
<a ui-sref="pilliondetails({pillionId:pillion.request_id})" nav-direction="enter">
<h2>More Details...</h2>
</a>
</div>
</ion-item>
</ion-list>
my app.js
.state('pillionlist', {
url: '/pillionlist',
templateUrl: 'templates/pillionlist.html',
controller: 'PillionListCtrl'
})
.state('pilliondetails', {
url: '/pillionlist/:pillionId',
templateUrl: 'templates/pilliondetails.html',
controller: 'PillionDetailCtrl'
})
Its redirecting to pillionDetail view but not showing data.
Please help.

The first thing i noticed is
ui-sref="pilliondetails({pillion.request_id})"
it should be key-value pair like this
ui-sref="pilliondetails({ your_id : pillion.request_id})"
and in stateProvider, the url of details page should contain parameter. for eg.
url : '/pilliondetails/:your_id'

Meteor angular ui-router ui-sref works in one case, not another

I'm building an angular meteor app with a mongoDB Collection that with this structure:
{
"_id" : "9YFoLcpDKFbJjHDoN",
"name" : "Negative Thought 1",
"betterThoughts" : [
{
"name" : "bt",
"_id" : ObjectId("cdb4533e03a0a430b02320af")
}
]
}
The app has the following structure with three depths
Home: contains list of negative thoughts
Negative thought: contains list of better thoughts
Better thought details
Clicking a negative thought in level 1 leads to that negative thought in level 2. This works. Clicking a better thought in level 2 however does not lead to that better thought's details in level 3.
My UI Router .config looks like this:
angular.module('better-thoughts').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('thoughts', {
url: '/thoughts',
template: '<negs-list></negs-list>'
})
.state('betterThoughts', {
url: '/thoughts/:negId',
template: '<better-thoughts></better-thoughts>'
})
.state('betterThoughtDetails', {
url: '/thoughts/:negId/:betterThoughtId',
template: '<better-thought-details></better-thought-details>'
});
$urlRouterProvider.otherwise("/thoughts");
});
So the first 2 states work fine, the third one does not.
In the thoughts (level 1) list of negative thoughts html I have this code to link to the next state (betterThoughts):
<li ui-sref="betterThoughts({ negId: neg._id })" ng-repeat="neg in negsList.negs">
{{neg.name}}
<button ng-click="negsList.removeNeg(neg)">X</button>
</li>
Again, this works.
In the better-thoughts (level 2) list of better thoughts I have the following to link to the next state (betterThought Details):
<ul>
<li ui-sref="betterThoughtDetails({ betterThoughtId: betterThoughts.neg.betterThought._id})"
ng-repeat="betterThought in betterThoughts.neg.betterThoughts">
{{betterThought.name}} </br>
{{betterThought._id._str}}
<button ng-click="betterThoughts.removeBetterThought(betterThought)">X</button>
</li>
</ul>
This does not work.
I'll just include the directive for betterThoughts (level 2) to save space.
angular.module('better-thoughts').directive('betterThoughts', function () {
return {
restrict: 'E',
templateUrl: 'client/negs/better-thoughts/better-thoughts.html',
controllerAs: 'betterThoughts',
controller: function ($scope, $stateParams, $reactive) {
$reactive(this).attach($scope);
this.newBetterThought = {};
this.helpers({
neg: () => {
return Negs.findOne({ _id: $stateParams.negId });
}
});
this.save = () => {
Negs.update({_id: $stateParams.negId}, {
$set: {
name: this.neg.name,
}
}, (error) => {
if (error) {
console.log('Oops, unable to update the thought...');
}
else {
console.log('Done!', $stateParams);
}
});
};
this.addBetterThought = () => {
Negs.update(
{ _id : $stateParams.negId },
{
$push:
{ betterThoughts: {
name : this.newBetterThought.name,
_id : new Mongo.Collection.ObjectID()
}
}
}
);
this.newBetterThought = {};
};
this.removeBetterThought = (betterThought) => {
Negs.update(
{ _id : $stateParams.negId },
{
$pull: {
betterThoughts: {
_id: betterThought._id
}
}
}
);
};
}
};
});
Here's a link to my repo in case important information is missing: https://bitbucket.org/mandyschippers/better-thoughts
Why does the link from level 1 to level 2 work, but not the link from level 2 to level 3?

Tried a few things and found the solution myself. It was to change ui-sref to the following:
betterThoughtDetails({
betterThoughtId : betterThought._id._str
to get the ._str property of the ObjectId object.

ng-show - using a service as a scope parameter

I'm writing an angular 1.5.0-rc0 application using bootstrap for a nav bar component.
I want to show the user an added items to his navigation bar if his user group id is 1.
first I created a service:
app.factory('UserService', function() {
return {
userGroupId : null
};
});
I created the nav bar as a directive, so i included it in the main html file
<nav-bar></nav-bar>
and the nav-bar directive code:
(function () {
angular.module('myalcoholist').directive('navBar', function () {
return {
restrict: 'E',
templateUrl: 'views/nav.html',
controller: ['$scope','$auth', 'UserService',function ($scope,$auth,UserService) {
$scope.user=UserService;
$scope.isAuthenticated = function()
{
return $auth.isAuthenticated();
};
}]
}
});
})();
as you can see I set $scope.user as the returned object from UserService.
in my login controller, after a successful login I set the userGroupId.
angular.module('myalcoholist').controller('LoginController',['$scope','$auth','$location', 'toastr','UserService',function ($scope,$auth,$location,toastr,UserService) {
$scope.authenticate = function (provider) {
$auth.authenticate(provider).then(function (data) {
var accessToken = data.data.token;
apiKey=accessToken;
UserService.userGroupId=data.data.user_group_id;
...
now.. my nav-bar template file is as the following code:
<li ng-show="user.userGroupId == 1">
Admin Drinks
</li>
even after the authentication, when I uset userGroupId to 1 the element is still not shown.
any ideas?
update
I debugged and noticed that UserService.userGroupId is still null. so
I changed the UserService to have the following code:
app.factory('UserService', function() {
var user = {userGroupId:null};
return {
setUserGroupId: function (userGroupId) {
user.userGroupId=setUserGroupId;
},
getUserGroupId: function () {
return user.userGroupId;
}
};
});
in my LoginController I now try to execute setUserGroupId:
angular.module('myalcoholist').controller('LoginController',['$scope','$auth','$location', 'toastr','UserService',function ($scope,$auth,$location,toastr,UserService) {
$scope.authenticate = function (provider) {
$auth.authenticate(provider).then(function (data) {
var accessToken = data.data.token;
apiKey=accessToken;
UserService.setUserGroupId(data.data.user_group_id);
...
when I debug i see that userService is an object with two functions as I defined, but when the javascript chrome debugger tries to execute this line:
UserService.setUserGroupId(data.data.user_group_id);
I get the following error:
ReferenceError: setUserGroupId is not defined
at Object.setUserGroupId (app.js:21)
at login-controller.js:12
at angular.js:15287
at m.$eval (angular.js:16554)
at m.$digest (angular.js:16372)
at m.$apply (angular.js:16662)
at g (angular.js:11033)
at t (angular.js:11231)
at XMLHttpRequest.v.onload (angular.js:11172)

I have created a fiddle showcasing your requirement (as close as possible), and it seems to work fine.
http://jsfiddle.net/HB7LU/21493/
My guess is that you aren't actually setting the value when you think you are, and will likely require some debugging. Here is the code for brevity.
HTML
<div ng-controller="MyCtrl">
<div ng-click="clicked()">
Click ME, {{user.value}}!
</div>
<test-dir></test-dir>
</div>
JS
angular.module('myApp',[])
.service('TestService', function(){
return {
value: 2
};
})
.directive('testDir', function(){
return {
restrict: 'E',
template: '<div ng-show="user.value === 1">Here is some text</div><div>Some more always showing</div>',
controller: function ($scope, TestService) {
$scope.user = TestService;
}
};
})
.controller('MyCtrl', function($scope, TestService){
$scope.user = TestService;
$scope.clicked = function(){
TestService.value = 1;
};
});

use AngularJs NgResource to load JSON file from localhost

Overview
I am building an app (running on MAMP) that holds contact information that will expand to hold more data such as project name & deadline, once this part is functional.
Questions
When the user visits /projects.php#/project/ I would like them to see a list of all the project names with a link to their detail page.
How should I write the following to access all of my data?
Do I need the .json at the end?
What does the #id do?
return $resource('data/project.json/:id', {id: '#id'});
When the user visits /projects.php#/project/a-gran-goodn I would like them to see the details about this project(for now, just the name & address).
How should I write the following to return my data by Id?
$scope.project = $routeParams.id ? Project.get({id: $routeParams.id}): new Project();
plunkr file
http://plnkr.co/edit/7YPBog
project.json
This file lives on http://localhost:8888/angularjs/ProjectsManager/data/project.json
[
{ "address" : [ " 3156 Dusty Highway",
" Teaneck New Jersey 07009-6370 US"
],
"id" : "a-gran-goodn",
"name" : "Grania Goodner",
"phone" : " (862) 531-9163"
},
{ "address" : [ " 62 Red Fawn Moor",
" Rodney Village West Virginia 25911-8091 US"
],
"id" : "b-aime-defranc",
"name" : "Aimery Defranco",
"phone" : " (681) 324-9946"
}
]
app.js
var projectsApp = angular.module('projects', ['ngResource']);
projectsApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'ProjectListCtrl',
templateUrl: 'partials/projectlist.html'})
.when('project/:id', {
controller: 'ProjectDetailCtrl',
templateUrl: 'partials/projectdetail.html'
})
.otherwise('/');
});
projectsApp.factory('Project', function($resource) {
return $resource('data/project.json/:id', {id: '#id'});
});
projectsApp.controller('ProjectListCtrl', function(Project, $scope) {
$scope.projects = Project.query();
console.log($scope.projects);
});
projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) {
$scope.project = $routeParams.id
? Project.get({id: $routeParams.id})
: new Project();
});
partials/projectlist.html
Add new item
<ul class="unstyled">
<li ng-repeat="project in projects">
<div class="well">
<h2><small>{{project.id}}</small> {{project.name}}</h2>
View Info for {{project.name}}
</div>
</li>
</ul>
partials/projectdetails.html
<h3>Information</h3>
<p>Name: {{project.name}}</p>
<p>Phone Number: {{project.phone}}</p>
<p ng-repeat="line in project.address">{{line}}</p>
index.php
<?php
header('Access-Control-Allow-Origin: *');
?>
<!doctype html>
<html ng-app="projects">
<head>
<meta charset="utf-8">
<title ng-bind="title" ng-cloak>Restaurant —</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body ng-controller="ProjectListCtrl">
<a class="brand" href="#">Projects Manager</a>
<div id="app-container" class="container-fluid">
<div class="row-fluid">
<div class="span12" id="main" ng-view>
</div><!--/.span12-->
</div><!--/.row-fluid-->
<footer>Copyright Projects © 2013</footer>
</div><!--/.container-->
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- Don't forget to load angularjs AND angular-resource.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js></script>
<!--Controllers-->
<script src="app.js"></script>
</body>
</html>

Since you can't query against a raw JSON file like you can with RESTful-style URLs (which is what $resource is built to do), you can instead get a copy of the JSON and then build your own query, get, etc. that looks at the data and returns the right thing. It's a bit tricky because you also want to support new Project, which doesn't really make sense when using a file-backed store, but this example supports it:
projectsApp.factory('Project', function($http) {
// Create an internal promise that resolves to the data inside project.json;
// we'll use this promise in our own API to get the data we need.
var json = $http.get('project.json').then(function(response) {
return response.data;
});
// A basic JavaScript constructor to create new projects;
// passed in data gets copied directly to the object.
// (This is not the best design, but works for this demo.)
var Project = function(data) {
if (data) angular.copy(data, this);
};
// The query function returns an promise that resolves to
// an array of Projects, one for each in the JSON.
Project.query = function() {
return json.then(function(data) {
return data.map(function(project) {
return new Project(project);
});
})
};
// The get function returns a promise that resolves to a
// specific project, found by ID. We find it by looping
// over all of them and checking to see if the IDs match.
Project.get = function(id) {
return json.then(function(data) {
var result = null;
angular.forEach(data, function(project) {
if (project.id == id) result = new Project(project);
});
return result;
})
};
// Finally, the factory itself returns the entire
// Project constructor (which has `query` and `get` attached).
return Project;
});
You can use the results of query and get like any other promise:
projectsApp.controller('ProjectListCtrl', function(Project, $scope) {
$scope.projects = Project.query();
});
projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) {
$scope.project = $routeParams.id
? Project.get($routeParams.id)
: new Project();
});
Note the change to Project.get($routeParams.id); also, the updated Plunker also fixes a problem in your $routeProvider configuration.
This is all demonstrated here: http://plnkr.co/edit/mzQhGg?p=preview

i will paste here a generic code i use to fetch json from your local or a remoteserver maybe it will help you:
it uses a factory that you can call when you need it.
app.factory('jsonFactory', function($http) {
var jsonFactory= {
fromServer: function() {
var url = 'http://example.com/json.json';
var promise = $http.jsonp(url).then(function (response) {
return response.data;
});
return promise;
},
hospitals: function() {
var url = 'jsons/hospitals.js';
var promise = $http.get(url).then(function (response) {
return response.data;
});
return promise;
}
};
return jsonFactory;
});
Then when you need to call it:
function cardinalCtrl(jsonFactory, $scope, $filter, $routeParams) {
jsonFactory.hospitals().then(function(d){
$scope.hospitals=d.hospitals;
});
jsonFactory.fromServer().then(function(d){
$scope.fromServer=d.hospitals;
});
}