How concat dynamic the params using ui-sref?
config state
.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('ads', {
url: '/ads?categorie&ubications',
...
});
}
]);
ubications data
$scope.ubications = [{_id : 1, name:'canada'},
{_id:2, name:'usa'},
{_id:3,name:'mexico'}]
in html
<a ng-repeat="ubication in ubications"
ui-sref="ads({ubications: ubication._id})" >
{{ubication.name}}
</a>
when i click on the link url
#!/ads?ubication=1
#!/ads?ubication=2
but would like to know the best form of concatenating the id
eg:
#!/ads?ubication=1,3,4
How I can do this without repeating ids?
link plnkr
http://plnkr.co/edit/erEhSDiGxT1983kz2RsU?p=preview
You could use lodash...
<a ui-sref="ads({ubications: _.uniq(_.pluck(foo, '_id')).join(',') })" >
{{ubication.name}}
</a>
This gets all of the ids, removes duplicates, and joins them into a comma delimited string.
Related
Currently, I'm using URL like
/order
/order?id=123
/orderitem/123
/orderitem/123/id=456
where there's one controller for the first two cases and another one for the last two cases. Each controller shows an entity list and optionally (when an id is given) details of the selected entity.
I'd like to switch to a more logical schema like
/order
/order/123
/order/123/item
/order/123/item/456
without changing the controllers. According to this comment by misko, the controller instance doesn't get preserved on "path" (rather than just "search") changes.
Is there a way to avoid reinstantiating the controller?
I'm using no ui-router, would it help?
With ui-router, you can define which controller is used for which state:
var myApp = angular.module('app', ['ui.router']);
myApp.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('order', {
url: '/order/:orderId',
controller: 'OrderCtrl',
templateUrl: 'orders.html'
}).state('order.item', {
url: '/item/:itemId',
templateUrl: 'items.html',
controller: 'ItemsCtrl'
});
}]);
Then in your template files, you can link to each state (with an input id if needed):
<a ui-sref="order">/order</a>
<a ui-sref="order({id:1})">/order/1</a>
<a ui-sref="order({id:1}).item">/order/1/item</a>
<a ui-sref="order({id:1}).item({id:1})">/order/1/item/1</a>
I'm developing an app where it uses the information of the first page so that, that information is used as the input for the second page. To pass the information I'm using the $stateParams but still, the second page didn't display the output.
html page 1:
<ion-list>
<ion-item ng-model="carBrand" ng-repeat="name in carSelect" ng-click="selectItem(carBrand)">
{{name.name}}
</ion-item>
</ion-list>
html page 2:
<ion-checkbox ng-model="cartype" ng-repeat="brandType in carBrand.types">
<div align="center"><span>{{brandType}}</span></div>
</ion-checkbox><br><br>
controller:
carService.controller('carBrand',['$scope','carRepository','$rootScope','$state','$stateParams',function($scope,carRepository,$rootScope,$state,$stateParams){
$scope.newCarList=[];
$rootScope.carSelect=carRepository.data;
$scope.selectItem=$stateParams.name;
$scope.selectItem=function(key){
$scope.newCarList.push(key);
$state.go('app.CarDetails',{value:$scope.name});
}
app.js
var carService = angular.module('CarWash',['ionic']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.Cartype',{
url:'/Cartype',
views:{
'menuContent':{
templateUrl:'templates/Cartype.html',
controller:'carBrand'
}
}
})
//carEdit.html
.state('app.carEdit',{
url:'/carEdit',
views:{
'menuContent':{
templateUrl:'templates/carEdit.html'
}
}
})
It looks like you're using UIRouter as well?
There are 2 glaring issues I see right away.
you're telling UIRouter to go to a state 'app.CarDetails' which I don't see defined in your $state config
you haven't declared any params to use in your states.
When you want to drive a UI state with parameters, you need to either define the params in the URL or define a params object on the state. Let's assume that you wanted to go to 'app.CarEdit' when you click the item. Your state would look like this:
URL driven parameters:
.state('app.CarEdit', {
url: '/edit/{type}',
....
})
OR
hash-driven parameters:
.state('app.CarEdit', {
url: 'carEdit',
params: { type: undefined }
})
In either case when you call $state.go you need to pass the params back with type defined:
$state.go('app.CarEdit', { type: $scope.selectedType })
Something like that.
I need to dynamically construct a link to another route on an angular app using ui-sref with both params and query params. Example:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({cid:comment.activityItemId, cid:itemId})">{{comment.subject}}</a>
This constructs a link that looks something like
www.website.com/pass/11/conversations/178
I need to also add a query parameter to the end of this so the entire url will look like
www.website.com/pass/11/conversations/178?comment_id=126
Add the query parameters to the url in the ui router config:
.state('yourstate', {
url: '/pass/:activityId/conversations/:conversationId?comment_id',
templateUrl: 'path/to/template',
controller: 'YourController'
});
Then pass the comment_id just like you pass the other params:
<a class="clr-secondary" ui-sref="app.topic.individual.conversation.single
({activityId:comment.activityItemId, conversationId:itemId, comment_id: 126})">{{comment.subject}}</a>
I want to update status information for which I need to pass two params one is say school_id and other one is status which may be(approved, pending , declined) depending on the user clicks the button. I have a table like school_info with fields like id school_name status So in my applicationjs I need to pass two params id and status. here is my html code, I have ng-repeat so I am using school in schools.
<button class="btn btn-success" ng-model="approve">Approve</button>
<a href="#/changeStatus/{{school.id}}/declined"><button class="btn btn-danger" ng-model="decline">Decline</button><a>
<button class="btn btn-deafult" ng-model="Pending">Pending</button>
my app.js code is
var app=angular.module("admin",[]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.php',
controller: 'adminCtrl'
}).when('/changeStatus/:id/:sts',{
templateUrl:'home.php',
controller:'adminCtrl'
}).when('/Mapview/:id',{
templateUrl:'mapview.html',
controller:'MapCtrl'
}).otherwise({
redirectTo: "/"
});
});
app.controller("adminCtrl",function($scope,$http,$routeParams){
var sts=$routeParams.status;
var id=$routeParams.id;
console.log("sts"+sts+id);
//here I want two params to be fetched inside console log. when clicked on specific btn.I have seen previous questions asked on multiple params passing but there must be easy way out to get multiple params.
});
Please use ng-href instead of href
and your hrefs should be like as below, no need of :
<a ng-href="#/changeStatus/{{school.id}}/approved"><button class="bt......
<a ng-href="#/changeStatus/{{school.id}}/declined"><button class="btn btn...
then in the controller,
var sts=$routeParams.sts; // u need to get as sts ,
//because you get it as sts in .when('/changeStatus/:id/:sts'..
var id=$routeParams.id;
console.log("sts"+sts);
console.log("id"+id);
Your links are not correct.
In AngularJS docs, they have this example:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
I didnt test it, but I think the only change you need to do is to remove the double-dots from your links, like this:
<a href="#/changeStatus/{{school.id}}/approved">
<button class="btn btn-success" ng-model="approve">Approve</button>
</a>
And also, you have a mistake in your controller. You named the params 'id' and 'sts', but then you use 'id' and 'status'.
I am using AngularUI library and want to extract the query parameters with from a URL
(sample URL: #\books\:categoryID?publisher=xyz (#\books\value?publisher=xyz)).
The $stateParams extracts the data as {categoryId:value?publisher=xyz} but I need to get it as {categoryId:"value", publisher:"xyz"}.
Thanks in advance
Angular ui-router has direct support for passing parameters as a query string params. There is a doc
URL Parameters - Query Parameters
There is a link to an example, using this state definition:
$stateProvider
.state('books', {
url : '/books/:categoryID?publisher',
template: '<div> This is a state def: '+
'<pre>{{toNiceJson(state)}}</pre>' +
' These are params sent to this state:' +
'<pre>{{toNiceJson(params)}}</pre>'+
' </div>',
controller: 'urlParamsCtrl',
})
And these could be links to get to that state
<a href="#/books/value?publisher=xyz">...
<a href="#/books/other?publisher=unknown%20publisher">...
<a ui-sref="books({categoryID:'value', publisher:'xyz'})">...
<a ui-sref="books({categoryID:'other', publisher:'unknown publisher'})">...
See more here
inject $routeParams and use:
$routeParams.categoryID
to get the value.