如何使用ng-repeat中的变量动态设置ng-click参数

时间:2014-12-18 18:58:27

标签: javascript angularjs

我正在尝试抓取标签中的{{date | date:'dd'}}表达式,并将其作为方法参数插入我的ng-click。问题是我尝试这个时出现undefined is not a function错误。 {{}}表达式应该填充,但看起来date进入ng-click就像一些未定义的变量。我不知道如何解决这个问题,我们将不胜感激。

<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>

我也尝试过:

ng-click="method(date) ng-click="method({{date | date:'dd'}})

在Angular中,我使用以下方法创建我的日期数组。

$scope.dates = [];

for (var i = -3; i <= 3; i++) {
    var today = new Date();
    $scope.dates.push(today.setDate(today.getDate() + i));
}

我的方法在methodController

中定义
$scope.method = function (date) {
//code guts
}

3 个答案:

答案 0 :(得分:1)

我认为问题与您method的定义有关。

所以,我建议使用以下设计来使事情更加紧密

将控制器内的方法定义为$scope对象的属性,如下所示

$scope.method = function(date)
{
 //your method logic here
}

然后按如下方式调用标记中的方法

<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>

答案 1 :(得分:1)

建立其他人。 $ filter函数似乎就是答案。但是在控制器逻辑中而不是在视图中的方法中过滤它。这是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>

答案 2 :(得分:0)

如果我理解你的问题:

您希望将已过滤的date传递给您的方法(在控制器内定义)。

要做到这一点你可以:

  1. 在控制器中定义过滤器

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

  2. 在您的视图中调用它

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