Привязка данных AngularJS при использовании ng-repeat
Я прошу прощения, если у этого есть неловкое название вопроса. Мне нужна помощь, чтобы понять, как выполнить правильную привязку данных в определенном случае. У меня есть объект, который я называю TimesheetData этот объект хранит строку, которая похожа на неделю 6/13/2016также имеет массив weekData в котором хранятся объекты с идентификатором, а затем часы, отработанные в каждый день недели.
я использую ng-repeat чтобы заполнить выпадающий список, выберите дополнительную неделю данных, но я теряюсь, когда выясняю, как выбрать таблицу ниже этой недели с выбранным значением, которое является датой.
В приведенном ниже коде мне нужно как-то обновить данные в <td> теги, соответствующие данным, хранящимся в объекте, у которого weekOf равен выбранному. Я полагаю, что решением будет связать данные в таблице из массива, используя индекс выбранного элемента в теге select.
Может кто-нибудь показать мне, как получить этот индекс.
dash.TimesheetData.WeekData[x].xyzгде x это значение из тега выбора и его выбранного индекса.
Некоторый код ниже для справки:
<h2>Week of {{dash.TimesheetData.WeekOf}}</h2>
<p>
Week
<select style="color:black;" data-ng-model="dash.TimesheetData.WeekOf">
<option data-ng-repeat="options in dash.TimesheetData.WeekData" value="{{options.WeekOf}}">{{options.WeekOf}}</option>
</select>
</p>
<div class="table-responsive">
<div class="table-hover table-striped">
<style>
.table td {
text-align: center;
}
.table th {
text-align: center;
}
</style>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{dash.TimesheetData.WeekData[0].ID}}</td>
<td>{{dash.TimesheetData.WeekData[0].Monday}}</td>
<td>{{dash.TimesheetData.WeekData[0].Tuesday}}</td>
<td>{{dash.TimesheetData.WeekData[0].Wednesday}}</td>
<td>{{dash.TimesheetData.WeekData[0].Thursday}}</td>
<td>{{dash.TimesheetData.WeekData[0].Friday}}</td>
<td>{{dash.TimesheetData.WeekData[0].Saturday}}</td>
<td>{{dash.TimesheetData.WeekData[0].Sunday}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Расписание объекта для справки:
function WeekObject(ID, Mon, Tue, Wed, Thur, Fri,Sat,Sun, WeekOf) {
this.ID = ID;
this.Monday = Mon;
this.Tuesday = Tue;
this.Wednesday = Wed;
this.Thursday = Thur;
this.Friday = Fri;
this.Saturday = Sat;
this.Sunday = Sun;
this.WeekOf = WeekOf;
};
this.TimesheetData = {
WeekOf: '',
WeekData: [
new WeekObject(1,7,4,4,4,1,0,0, '6/13/2016'),
new WeekObject(2,5,6,2,8,1,2,0,'6/20/2016')
],
};
2 ответа
Я также рекомендовал бы видеть директиву ng-options, чтобы разместить выбранный элемент HTML. Как видно из ссылки, ваша неделя может быть привязана к переменной области действия ng-model.
Во-первых, ваш вопрос не так ясен; очистить часть грамматики. Во-вторых, вы можете написать функцию для изменения содержимого таблицы в соответствии с раскрывающимся списком.
Я использовал ng-change Директива о раскрывающемся списке. Пожалуйста, найдите работающий поршень и, пожалуйста, ответьте своими выводами.
<select style="color:black;" data-ng-model="TimesheetData.WeekOf" ng-change="changeTable()">
<option ng-repeat="day in array" value="{{day}}">{{day}}</option>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.array = ["mon", "tue", "wen", "thu"];
function WeekObject(ID, Mon, Tue, Wed, Thur, Fri, Sat, Sun, WeekOf) {
this.ID = ID;
this.Monday = Mon;
this.Tuesday = Tue;
this.Wednesday = Wed;
this.Thursday = Thur;
this.Friday = Fri;
this.Saturday = Sat;
this.Sunday = Sun;
this.WeekOf = WeekOf;
}
$scope.TimesheetData = {
WeekData: [
new WeekObject(1, 7, 4, 4, 4, 1, 0, 0, '6/13/2016'),
new WeekObject(2, 5, 6, 2, 8, 1, 2, 0, '6/20/2016'),
new WeekObject(3, 5, 6, 2, 8, 1, 2, 0, '6/20/2016'),
new WeekObject(4, 5, 6, 2, 8, 1, 2, 0, '6/20/2016')
],
};
$scope.changeTable = function(index) {
for (var i = 0; i < $scope.array.length; i++) {
var test = $scope.array[i];
if (test === $scope.TimesheetData.WeekOf) {
$scope.row = $scope.TimesheetData.WeekData[i];
}
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h2>Week of {{TimesheetData.WeekOf}}</h2>
<p>
Week
<select style="color:black;" data-ng-model="TimesheetData.WeekOf" ng-change="changeTable()">
<option ng-repeat="day in array" value="{{day}}">{{day}}</option>
</select>
</p>
<div class="table-responsive">
<div class="table-hover table-striped">
<style>
.table td {
text-align: center;
}
.table th {
text-align: center;
}
</style>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
<th>WeekOf</th>
</tr>
</thead>
<tbody>
<tr>
<th>{{row.ID}}</th>
<th>{{row.Monday}}</th>
<th>{{row.Tuesday}}</th>
<th>{{row.Wednesday}}</th>
<th>{{row.Thursday}}</th>
<th>{{row.Friday}}</th>
<th>{{row.Saturday}}</th>
<th>{{row.Sunday}}</th>
<th>{{row.WeekOf}}</th>
</tr>
</tbody>
</table>
</div>
</div>
<!--{{TimesheetData.WeekData[0].ID}}-->
</body>
</html></select>
$scope.changeTable = function(index){
for (var i=0; i<$scope.array.length;i++)
{
var test = $scope.array[i];
if( test === $scope.TimesheetData.WeekOf)
{
$scope.row= $scope.TimesheetData.WeekData[i];
}
}}
Пожалуйста, обратите внимание на код выше.