[英]How to take var from inside of ng-repeat and pass it to the controller, than pass it back to ng-repeat
I have a problem when im trying to pass the value Date from ng-repeat
to the controller. 我在尝试将值Date从ng-repeat
传递给控制器时遇到问题。 I need controller to do some function for each element in ng-repeat
but cant get this to work. 我需要控制器为ng-repeat
每个元素执行一些功能,但无法使其正常工作。 Maybe someone could help me? 也许有人可以帮助我? I would appreciate it. 我会很感激。 Image of problem . 问题形象 。 To be clear I want to take this date, and make a function which will return me day of the week from this date. 为了清楚起见,我想使用这个日期,并创建一个函数,该函数将从该日期返回星期几。 I want to do this in similar way as i did with $scope.todayDay
. 我想以与$scope.todayDay
类似的方式执行此$scope.todayDay
。
Here is some code: 这是一些代码:
HTML: 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>
CONTROLLER: 控制器:
'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()];
};
}
]);
You could create a function within your controller that takes in a date as a parameter and returns the day of the week. 您可以在控制器内创建一个函数,该函数将日期作为参数并返回星期几。
$scope.getDayOfWeek = function(date) {
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
return days[date.getDay()];
}
And then call this method from the frontend in your table: 然后从表的前端调用此方法:
<td>{{ getDayOfWeek(workingTime.date) }}</td>
You can probably handle this without a method by putting the days array from above right on the scope, and then accessing it. 通过将右上方的days数组放在示波器上,然后对其进行访问,您可能无需方法即可处理此问题。
In controller: 在控制器中:
$scope.days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
In view: 鉴于:
<td>{{ days[workingTime.date.getDay()] }}</td>
You can use the date
filter instead: 您可以改用date
过滤器 :
<td>{{ workingTime.date | date:'EEEE'}}</td>
or you just create a proper function on the controller to transform the date to day-of-week: 或者您只需在控制器上创建适当的函数即可将日期转换为星期几:
$scope.dayOfWeek = function(date) {
return days[date.getDay()];
}
and use in the HTML 并在HTML中使用
<td>{{ dayOfWeek(workingTime.date)}}</td>
If I understand you well, you want to manipulate the view and display only the day of the week inside your view. 如果我很了解您,则您想操纵视图并仅在视图中显示星期几。
To do so, a controller's function wouldn't be suitable. 为此,控制器的功能将不合适。 Instead, you should rather use a filter : 相反,您应该使用过滤器:
angular.module('yourAppName').filter('day', function() {
return function(input) {
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
return day[input.getDay()];
};
});
Then, you simply need to use it as a filter in your view : 然后,您只需要在视图中将其用作过滤器即可:
<td>{{ workingTime.to | day}}</td>
You can use the for return the name of day in week: 您可以使用来返回星期几的名称:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.