привязка данных AngularJS при использовании ng-repeat

Question

Приносим извинения, если у этого есть неудобный вопрос. Мне нужна помощь, чтобы понять, как выполнить надлежащую привязку данных в определенном случае. У меня есть объект, который я вызываю TimesheetData. Этот объект хранит строку, которая равна неделе 6/13/2016, а также имеет массив weekData, в котором хранятся объекты с идентификатором, а затем часы, отработанные в каждый день недели.

Я использую ng-repeat, чтобы заполнить выпадающий список с помощью дополнительной недели данных, но я потерял информацию о том, как выбрать таблицу ниже этой недели с выбранным значением, которое является датой.

В приведенном ниже коде необходимо как-то обновить данные в тегах <td>, чтобы соответствовать данным, хранящимся в объекте, который имеет значение weekOf, равное выбранному. Я считаю, что решение будет заключаться в привязке данных в таблице от массива с использованием индекса выбранного элемента в теге select.

Может ли кто-нибудь показать мне, как получить этот индекс.

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') 
    ], 
}; 

Answer 1

Я также рекомендую просмотреть директиву ng-options, чтобы поместить выбранный элемент HTML. Как видно из ссылки, вы можете ограничить свою неделю областью видимости модели ng.

https://docs.angularjs.org/api/ng/directive/select

Answer 2

Во-первых, ваш вопрос не так ясно; очистите часть грамматики. Во-вторых, вы можете написать функцию для изменения содержимого в таблице в соответствии с раскрывающимся списком.

Я использовал директиву 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]; 
    } 
}} 

Пожалуйста, обратите внимание, код, указанный выше.