I am calling an ng-click scrollTo function and passing dynamic id to it, but the id is not rendered and the function gets called.
HTML:
<a data-ng-click="scrollTo('div{{+$index}}')" href="javascript:void(0)">Click</a>
Script:
$scope.scrollTo=function(divId){
console.log(divId);
}
I get div{{+$index}} in console instead of div0
Probably easier to clean this up and just pass the $index - then format the ID in the controller:
<a data-ng-click="scrollTo($index)" href="javascript:void(0)">Click</a>
$scope.scrollTo=function(index){
var divId = "div" + index;
console.log(divId);
}
It should be like this: data-ng-click="scrollTo({{('div'+$index) | json }})"
Related
in my case I generate "recent searches" links getting the anchor text from a list (ng-repeat="city in meteo.cityList").
Then I want to call a function passing the content of the ancor text, so I'm trying to use ng-model (ng-model='meteo.button') to get the value and ng-click to call the function (ng-click="meteo.search(meteo.button)")
<nav class="recent-cities">
<h3>Search History:</h3>
<a ng-repeat="city in meteo.cityList" ng-model='meteo.button' ng-click="meteo.search(meteo.button)" href="#">{{city}}</a>
</nav>
It doesn't work because ng-model does't get the value. I also wanted to pass "city" directly to the function but it doesn't work.
I guess the issue is about rendering but i can't figure out how.
Here is the entire code: http://codepen.io/tiuscia/pen/qqLQNd
I will appreciate any kind of help
thanks
use a div first
<div ng-repeat="city in meteo.cityList">
<a ng-model='city.button' ng-click="meteo.search(city.button)" href="#">{{city}}</a>
A way to solve this is using $event to retrieve the clicked element, so:
<a ng-model='city.button'
ng-click="meteo.search($event)" href="#">{{city}}</a>
Then you can do something like this in your controller function:
$scope.meteo.search = function(event) {
var city = event.target.text; // or event.currentTarget.text
// the rest of your code here...
another way is creating you own custom directive, so, you pass the city name (or city.button) to the directive.
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)"
i have used angular-translate, and it works great.
But now the problem is how can i use it in my controller functions?
normal we can use it in the html templates as {{ 'mystring' | translate }}
but i actualy want to do this:
function bla(){
var myvalue = 'mystring' | tranlate
return value;
}
and then in my html {{ value }}
As per Docs,to use filter inside controller is as follows.
$filter('filter')(array, expression, comparator)
You need to write something below
app.controller('MainCtr', ['$scope','$translate','$filter', function ($scope,$translate,$filter) {
$translate.use($scope.language.langCode);
$scope.data = $filter('translate')('Title');//where Title is language dependant
});]);
Demo to call filter inside controller
It seems you are trying to show dinamic content on your html. To achieve this you should think in other way to do it using angular-translate. I can guess you are trying to achieve this:
controller.js
$scope.mystring = 'MY_LITERAL_CODE';
inde.html
<span>{{ mystring | translate }}</span>
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.