如何从ng-repeat内部获取var并将其传递给控制器​​，而不是将其传递回ng-repeat

Question

我在尝试将值Date从ng-repeat传递给控制器​​时遇到问题。 我需要控制器为ng-repeat每个元素执行一些功能，但无法使其正常工作。 也许有人可以帮助我？ 我会很感激。 问题形象 。 为了清楚起见，我想使用这个日期，并创建一个函数，该函数将从该日期返回星期几。 我想以与$scope.todayDay类似的方式执行此$scope.todayDay 。

这是一些代码：

HTML：

<div class="container fromTop" ng-init="workingTime.showWorkingTimeForWorker()">
    <h1 class="container">Hi {{currentUser.first_name}}, here are your working hours</h1>
    <h3 class="container">If you dont remember today is {{today}}, {{todayDay}}</h3>
    <table class="table table-striped table-condensed">
        <thead>
        <tr>
            <th style="min-width: 80px;">Date</th>
            <th style="min-width: 80px;">Day</th>
            <th style="min-width: 80px;">From</th>
            <th style="min-width: 80px;">To</th>
            <th style="min-width: 80px;">Hours</th>
            <th style="min-width: 80px;">On position</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="workingTime in listOfWorkingTimesForWorker | orderBy: 'date'" ng-if="workingTime.date >= today">
            <td>{{ workingTime.date}}</td>
            <td>{{dayOfWeak}}</td>
            <td>{{ workingTime.from | date: "HH:mm"}}</td>
            <td>{{ workingTime.to | date: "HH:mm"}}</td>
            <td>{{ workingTime.to - workingTime.from}}h</td>
            <td><span ng-repeat="position in currentUser.positions">{{position.name}}</span></td>
        </tr>
        </tbody>
    </table>
</div>

控制器：

'use strict';

this.appControllers.controller('WorkingTimesController', [
    'WorkingTime', 'WorkerService', 'Position', '$scope', '$stateParams', 'ngNotify', '$state', function (WorkingTime, WorkerService, Position, $scope, $stateParams, ngNotify, $state) {

        this.showWorkingTimeForWorker = function() {
          var formatDate = function(date) {
              var d = new Date(date),
                  month = '' + (d.getMonth() + 1),
                  day = '' + d.getDate(),
                  year = d.getFullYear();

              if (month.length < 2) month = '0' + month;
              if (day.length < 2) day = '0' + day;

              return [year, month, day].join('-');
          }
          $scope.listOfWorkingTimesForWorker = [];
          WorkerService.getWorkingTimesForWorker(function(res) {
            $scope.listOfWorkingTimesForWorker = res;
          });
          //$scope.today = formatDate(new Date());
          var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
          $scope.todayDay = days[new Date().getDay()];
        };
    }
]);

Answer 1

您可以在控制器内创建一个函数，该函数将日期作为参数并返回星期几。

$scope.getDayOfWeek = function(date) {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    return days[date.getDay()];
}

然后从表的前端调用此方法：

<td>{{ getDayOfWeek(workingTime.date) }}</td>

通过将右上方的days数组放在示波器上，然后对其进行访问，您可能无需方法即可处理此问题。

在控制器中：

$scope.days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

鉴于：

<td>{{ days[workingTime.date.getDay()] }}</td>

Answer 2

您可以改用date过滤器 ：

<td>{{ workingTime.date | date:'EEEE'}}</td>

或者您只需在控制器上创建适当的函数即可将日期转换为星期几：

$scope.dayOfWeek = function(date) {
    return days[date.getDay()];
}

并在HTML中使用

<td>{{ dayOfWeek(workingTime.date)}}</td>

Answer 3

如果我很了解您，则您想操纵视图并仅在视图中显示星期几。

为此，控制器的功能将不合适。 相反，您应该使用过滤器：

angular.module('yourAppName').filter('day', function() {
  return function(input) {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    return day[input.getDay()];
  };
});

然后，您只需要在视图中将其用作过滤器即可：

        <td>{{ workingTime.to | day}}</td>

Answer 4

您可以使用来返回星期几的名称：

 var appControllers = angular.module("App", []); appControllers.controller('WorkingTimesController', function($scope){ $scope.showWorkingTimeForWorker = function() { var formatDate = function(date) { var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [year, month, day].join('-'); }; $scope.listOfWorkingTimesForWorker = [ {from : new Date(2010, 11, 1), to : new Date(2011, 10, 1)}, {from : new Date(2009, 03, 1), to : new Date(2010, 11, 1)}, {from : new Date(2014, 09, 1), to : new Date(2015, 1, 1)} ]; }; }).filter('dayNameOfWeek', function() { return function(input) { var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; var dayofWeek = days[input.getDay()]; return dayofWeek; }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="App" ng-controller="WorkingTimesController"> <div class="container fromTop" ng-init="showWorkingTimeForWorker()"> <h1 class="container">Hi {{currentUser.first_name}}, here are your working hours</h1> <h3 class="container">If you dont remember today is {{today}}, {{todayDay}}</h3> <table class="table table-striped table-condensed" border="1px"> <thead> <tr> <th>Date</th> <th>From</th> <th>To</th> <th>Day of week FROM</th> <th>Day of week TO</th> </tr> </thead> <tbody> <tr ng-repeat="workingTime in listOfWorkingTimesForWorker"> <td>{{workingTime.date}}</td> <td>{{workingTime.from | date: "HH:mm"}}</td> <td>{{workingTime.to | date: "HH:mm"}}</td> <td>{{workingTime.from | dayNameOfWeek}}</td> <td>{{workingTime.to | dayNameOfWeek}}</td> </tr> </tbody> </table> </div> </div>