如何从ng-repeat中取出var并将其传递给控制器​​，而不是将其传递给ng-repeat

Question

我试图将值ng-repeat传递给控制器​​时遇到问题。我需要控制器为ng-repeat中的每个元素执行一些功能，但是无法使其工作。也许有人可以帮助我？我会很感激。 Image of problem。 为了清楚起见，我想拍下这个日期，并制作一个函数，它将从这一天开始返回我的星期几。我希望以与$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 filter：

<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

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

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>