AngularJS data binding when using ng-repeat

Question

I apologize if this has an awkward question title. I need help understanding how to perform the proper data binding in a certain case. I have an object I call TimesheetData this object stores a string which is the week like 6/13/2016, it also has an array of weekData which stores objects that have an id and then hours worked on each day of the week.

I am using ng-repeat to populate a drop down select with the optional week of data, but I am lost on figuring out how to a table below this week selection with the value selected which is a date.

In the code below I need to somehow update the data in the <td> tags to correspond with the data stored in the object that has the weekOf that is equal to the selected one. I believe on solution would be to bind the data in the table from the array using the index of the selected item in the select tag.

Can anyone show me how to get that index.

dash.TimesheetData.WeekData[x].xyz where x is the value from the select tag and it's selected index.

Some code below for reference:

<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>

Timesheet object for reference:

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

Are you trying to iterate through the properties of `WeekObject`? — 8protons, Jun 16 '16 at 14:28
I am trying to display data about a certain week in the table. I want the table data to be bound to the week that is selected in the dropdown list. — Bailey Miller, Jun 16 '16 at 14:31

score 2 · Accepted Answer · answered Jun 16 '16 at 14:46

2

I would also recommend to see the ng-options directive to popolate the select HTML element. As you can see from the link, you can have your week bounded to the ng-model scope variable.

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

answered Jun 16 '16 at 14:46

enricop89

352
2
13

Okay I like this approach however now I am having a problem. I am trying to bind the options variable which is from ng-repeat to a new variable I called data. However I can only bind a single attribute of options not the whole options variable to another variable. – Bailey Miller Jun 16 '16 at 15:02
Alright here is my binding: When I do week of {{data}} I can see an object, when I do {{data.ID}} I get nothing. – Bailey Miller Jun 16 '16 at 15:03
Try this one But you have to set to data a default value from TimesheetData.WeekData. Let's say $scope.data = TimesheetData.WeekData[0] – enricop89 Jun 16 '16 at 15:12
I am working on it the first problem though is that inside the dropdown I see [object object] rather than a date – Bailey Miller Jun 16 '16 at 15:25
1

Marked as answer because it lead me in the direction that ultimately solved my problem. – Bailey Miller Jun 16 '16 at 15:34
Thanks I am currently an intern for a local software company and they're having me learn angular for when they're ready to move away from silverlight completely. – Bailey Miller Jun 16 '16 at 16:15

Saurabh Sarathe · Answer 2 · 2019-02-15T17:25:08.367

You can write a function to change the content in the table according to the drop-down.

I have used the ng-change directive on the dropdown. Please find the working plunker and please respond with your findings.

<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];
  }
}}

Please note the code above.

I am working on adding this into my code to make sure it works inside my code. Thank you for answering, this is what I want it will just take me 5 or so minutes to get the code implemented. — Bailey Miller, Jun 16 '16 at 14:40
I've changed the for loop to match my variables now so anywhere you have $scope.array I have changed to $scope.TimesheetData.WeekData — Bailey Miller, Jun 16 '16 at 14:45
I don't understand why you need the $scope.array because the drop down should have all the dates as values so you want to add all the WeekOf values from WeekObjects to the drop down. — Bailey Miller, Jun 16 '16 at 14:47
I have added $scope.array Because I didn't understand from where you are getting day data. — Saurabh Sarathe, Jun 16 '16 at 15:13

AngularJS data binding when using ng-repeat

2 Answers2