CODEWITHSUNDEEP
javascriptangularjs
Rex_C
Rex_C

Reputation: 2477

How to dynamically set parameter on ng-click with variable from ng-repeat

I am trying to grab the {{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
}

Upvotes: 0

Views: 2172

Answers (3)

jamie
jamie

Reputation: 690

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>

Upvotes: 1

Walid Ammar
Walid Ammar

Reputation: 4128

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:

  1. define the filter in your controller

    app.controller('DemoController', function($scope, $filter) { $scope.dateFilter = $filter('date'); });

  2. invoke it in your view

    ng-click="method(dateFilter(date, 'dd'))"

Upvotes: 0

Muhammad Gouda
Muhammad Gouda

Reputation: 869

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>

Upvotes: 1

Related Questions