I'm trying to pass two parameters via view > controller 1 > $route > controller 2.
from view 1:
<td>{{row.NetworkOrgFullName}}</td>
from controller 1:
$scope.getGroups = function (acnId, orgId) {
$location.path('/Groups/' + acnId +'/'+ orgId);
}
from my routeProvider:
$routeProvider.when('/Groups/:acnId/:orgId', {
templateUrl: 'Pages/acn/partials/groups.html',
controller: 'groupsController'
});
On my controller 2:
console.log($routeParams.acnId , $routeParams.orgId)
My results in Console.Log are: [object Object] 164
I can do this with a single param and I actually pass the id I want to pass.
What am I doing wrong?
Thanks in advance!
Your ng-class should be using {{}} interpolation directive, I don't understand why you used ng-class
ng-class="getGroups(row.acnOrgId, row.NetworkOrgID)"
You redirecting purpose you could use anchor ng-href to create an href link.
<td>
<a ng-href="/Groups/{{row.acnOrgId+'/'+row.NetworkOrgID}}">{{row.NetworkOrgFullName}}</a>
</td>
Apparently there are problems with the link tag and the use of service $ location.
There are two possible ways to switch from view 1 to 2:
by using ng-href: <a ng-href="/Groups/{{row.acnOrgId}}/{{row.NetworkOrgID}}">{{row.NetworkOrgFullName}}</a>
by using ng-click: {{row.NetworkOrgFullName}}
About getGroups function. Consider that $location.path change the router to the URL passed as a parameter.
Related
I am using angular js for the web application. So I want to navigate one page to another page with some parameter in data-ui-sref. When I use static parameter then it will navigate with parameter.
Example:
<a data-ui-sref="app.admin({startFrom:'param1',endTo:'param2'})">click</a>
Module.js
.state('app.admin', {
url: '/travlers?startFrom&endTo',
data: {
title: 'travelers'
},
params :
{
startFrom: null,
endTo:null
},
views: {
"content#app": {
templateUrl: 'app/admin.html',
controller: 'admin'
}
}
});
If I used static parameter in data-ui-sref then it will work. But If I take from scope value in parameter then it is not working.
When I use scope value in data-ui-sref parameter
example.html
<a data-ui-sref="app.admin({startFrom:'{{dateFrom}}',endTo:'{{dateTo}}'})">click</a>
example.js
angular.module('app.admin').controller('example', function () {
$scope.dateFrom="07-05-17";
$scope.dateTo="07-05-17"
});
When I see in console then scope value is append in data-ui-sref parameter
When I see in console then it is looks like this
<a data-ui-sref="app.systemAdmin.travelers({startFrom:'07-05-17',endTo:'07-05-17'})" class="fa fa-external-link-square" aria-hidden="true" style="font-size:18px;color:#fff" href="#/systemadmin/travlers">click</a>
After click the link then parameter is not going to module.js. URL is form without parameter and parameter(dateFrom,dateTo) is not going in state url.
I have seen one link. But it is for dynamic value Dynamically set the value of ui-sref Angularjs but my query is not for scope value in as parameter in data-ui-sref.
ui-sref value is a scope expression. Therefore, you don't have to interpolate the scope value but pass it as if it was javascript with direct access to your scope like: <a data-ui-sref="app.admin({ startFrom: dateFrom, endTo: dateTo })">click</a>.
So I have a custom filter set up in my ng-repeat list which I can change dynamically using different buttons with the same page.
My question is, how do I go about changing this filter, with a value outside of the page.
To clarify, I have an ng-repeat list on my 'list.view.html' and I would like to be able to press a button on my homepage, which includes a filter value, and load the 'list.view.html' with the filtered results including the param of the button on my homepage.
To iterate further,
above my ng-repeat on list.view.html, I include buttons like so:
<button class="sortBy" ng-click="myFilter = { statusOpen : true }">Open</button>
Which updates my ng-repeat to only include items where the statusOpen boolean evaluates to true.
Here is the filter in my ng-repeat
<li class="list-group-item animate-repeat" data-ng-repeat="task in vm.tasks | filter:search | filter:myFilter>
How would I achieve the same result by clicking a button on the homepage which routes to the list.view.html page with filtered results?
I have tried setting a param filter in the controller for the list.view.html however I couldn't get it to work.
e.g <a ui-sref="tasks.list({ myFilter = { onlineTask : 'true' } })"> on my homepage and :: on my client.routes.js
params: {
myFilter: null
}
console error message
angular.js:11706 Error: [$parse:syntax] Syntax Error: Token '=' is unexpected, expecting [:] at column 12 of the expression [{ myFilter = { onlineTask : 'true' } }] starting at [= { onlineTask : 'true' } }].
http://errors.angularjs.org/1.3.20/$parse/syntax?p0=%3D&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=12&p3=%7B%20myFilter%20%3D%20%7B"
I am just looking for some general direction on how to proceed with this please.
Thanks very much in advance
I think that setting needed params in angular-ui filter is the best way to achive what you want.
You just have to remember to:
Set up you URL properly (include param in URL) and process params using $stateParams service in yout controller. You may use array if you have more then one filter:
$stateProvider
.state('search', {
url: "/search/?myFilter",
templateUrl: 'search.html',
controller: function ($stateParams) {
// Get filter(s)
console.log($stateParams.myFilter);
}
})
Properly assign your params in ui-sref (use colon!):
<a ui-sref="filter({ myFilter: ['filter1','filter2'] })">Go and filter</a>
See example: http://plnkr.co/edit/QOHNYHVPRJ8iBm3Adjcj?p=preview
And I have the following links in my page as following :
<li ng-repeat="o in villes | shuffle | limitTo:5">{{o.nomVille}}</li>
I want when I click on some link to call the searchByVille function and to log the parameter I passed to it as following :
$scope.search = function(id){
console.log(id);
}
which doesn't work.
How can I solve this ?
Omit the {{}} in your ngClick directive:
ng-click="searchByVille(o.codeVille)"
ngClick already takes an Angular expression - no need for them.
No need to evaluate using {{}}.
Use data-ng-click="searchByVille(o.codeVille)"
let us say we have a
Click Here
in the angular based application.
$scope.myFunction= function(){
// how to get the href
$http.get(href).success(function(data) {
})
}
the requirement is to click the and do a ajax request and get the json data from the server. since I choose to work on the angular, I don't know how to it in angular, since I don't know how to get the href attribute from the element
Try:
Click Here
Js:
$scope.myFunction= function(href){
// how to get the href
$http.get(href).success(function(data) {
})
}
DEMO
I using angularjs 1.5 and $event.target.href didn't work in my app.
I had to do this:
<a ng-click="$event.preventDefault();vm.openToolTip($event);" href="J3606">position 36.06</a>
js
function openToolTip(event){
var href = event.currentTarget.attributes["href"].nodeValue;
alert(href);
}
I am developing a mobile application and found that angularjs 1.1.4 has a ngTap directive available replacing standard ng-click. It makes app more robust, so I've decided to replace all my ng-href directive with ng-tap. For this purpose I've created a "go()" function available from $rootScope. The problem is that it can not resolve the url variable.
Here's my code.
$rootScope.go = function (url) {
$location.path(url);
}
and in template:
<a class="niceButtonLikeStyled" data-ng-click="go(/somewhere/var.id/)">{{ var.id }}</a>
Using data-ng-click as ngTap is portable and replaces ng-click if new ngMobile loaded.
My problem seems to be with go() argument (mixing static & variable content ?
Maybe there's the other way of just binding new ng-click to all links.. or simply adding own directive that would take value from ng-href and made the location redirect and attach the ng-tap click event.
AngularJS Expressions for ng-click
When you use ng-click, you're calling an AngularJS expression.
Your current code's expression is this:
go(/somewhere/var.id/)
You need to quote that string:
go('/somewhere/' + var.id + '/')
Other Issues
Another issue with your code: The function go should be in the scope of the controller rather than in the $rootScope:
angular.module('MyModule').controller(
'MyController',
function ($scope, $location) {
$scope.go = function (url) {
$location.path(url);
}
}
);
Here's how your template would look:
<div ng-controller="MyController as mycontroller">
<a class="niceButtonLikeStyled"
data-ng-click="mycontroller.go('/somewhere/' + var.id + '/')">
{{ var.id }}
</a>
</div>
That's the biggest issue with the code, you're using $rootScope instead of putting the variables and functions you need in the scope of a controller where it belongs.