これは難しい質問のタイトルがある場合はお詫び申し上げます。私は、特定のケースで適切なデータバインディングを実行する方法を理解する助けが必要です。私はTimesheetData
というオブジェクトを持っています。このオブジェクトは、6/13/2016
のような週である文字列を格納しています。また、weekData
という配列を持ち、idを持つオブジェクトを格納していて、毎週の曜日を処理しています。ng-repeatを使用した場合のAngularJSデータのバインド
私はng-repeat
を使用して、データのオプションの週をドロップダウン選択に入力しますが、選択された値を日付としてどのように今週の選択の下にテーブルを作成するかはわかりません。
以下のコードでは、<td>
タグのデータを、選択したweekOfと等しいオブジェクトに格納されているデータに対応するように更新する必要があります。私は、選択タグ内の選択された項目のインデックスを使用して、配列のテーブル内のデータをバインドすることが解決策であると考えています。
誰でも私にそのインデックスを取得する方法を教えてもらえますか?
dash.TimesheetData.WeekData[x].xyz
ここで、x
はselectタグの値であり、選択されたインデックスです。
参照については、以下のいくつかのコード:参照用
<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')
],
};
「WeekObject」のプロパティを反復しようとしていますか? – 8protons
私はテーブルにある週のデータを表示しようとしています。ドロップダウンリストで選択されている週にテーブルデータをバインドします。 –