How to dynamically set parameter on ng-click with variable from ng-repeat
Question
I am trying to grab the {{date | date:'dd'}} {{date | date:'dd'}} expression in my label and insert it as a method parameter on my ng-click . The problem is that I get an undefined is not a function error when I try this. The {{}} expression populates as it should, but it looks like date going into the ng-click is acting like some undefined variable. I'm not sure how to resolve this, any help would be appreciated.
<div ng-controller="methodController">
<div class="btn-group" data-ng-repeat="date in dates">
<label data-ng-click="method(date | date:'dd')">{{date | date:'dd'}}</label>
</div>
</div>
I've also tried:
ng-click="method(date) ng-click="method({{date | date:'dd'}})
In Angular, I use the below method to create my array of dates.
$scope.dates = [];
for (var i = -3; i <= 3; i++) {
var today = new Date();
$scope.dates.push(today.setDate(today.getDate() + i));
}
And my method is defined as such within the methodController :
$scope.method = function (date) {
//code guts
}
3 answers
solution1
1 2014-12-18 19:22:12
I think the problem is related to where your method is defined.
So, I suggest the following design to make things more connected
Define method inside your controller as a property of $scope object as follows
$scope.method = function(date)
{
//your method logic here
}
Then invoke the method in the markup as follows
<div ng-controller="YourController as c" />
...
<div class="btn-group" ng-repeat="date in dates">
<label ng-click="c.method(date)">{{date | date:'dd'}}</label>
</div>
...
</div>
solution2
1 ACCPTED 2014-12-18 20:04:49
Building off the others. The $filter function seems to be the answer. But filters it inside the controller logic rather than in the method in the view. Here is a plunk .
<body ng-controller="MainCtrl">
<p>Title</p>
<ul>
<li ng-repeat="date in dates"
ng-click="alert(date)"
ng-class="{{date | date:'dd'}}">click here: {{date | date:'dd'}} </li>
</ul>
<script>
angular.module('plunker')
.controller('MainCtrl', function($scope, $filter) {
$scope.dates = [];
$scope.newDate = new Date();
var today = $scope.newDate
for(i = -3; i < 0; i++) {
$scope.dates.push(today.setDate(today.getDate() + i));
}
$scope.alert = function(a) {
var b = $filter('date')(a, 'dd');
alert(b);
};
});
</script>
</body>
solution3
0 2014-12-18 19:10:18
If I understood your question:
You want to pass the filtered date to your method (which is defined inside the controller).
To do that you could:
define the filter in your controller
app.controller('DemoController', function($scope, $filter) { $scope.dateFilter = $filter('date'); });invoke it in your view
ng-click="method(dateFilter(date, 'dd'))"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.