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
– 8protons, Commented Jun 16, 2016 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
– Bailey Miller, Commented Jun 16, 2016 at 14:31

enricop89 · Accepted Answer · 2016-06-16 14:46:59Z

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, 2016 at 14:46

enricop89

3722 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bailey Miller Over a year ago

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 Over a year ago

Alright here is my binding: <select id="WeekOfID" style="color:black;" data-ng-model="data"> <option data-ng-repeat="options in TimesheetData.WeekData" value="{{options}}">{{options.WeekOf}}</option> </select> When I do week of {{data}} I can see an object, when I do {{data.ID}} I get nothing.

enricop89 Over a year ago

Try this one <select name="mySelect" id="mySelect" ng-options="option for option in dash.TimesheetData.WeekData" ng-model="data"> </select> But you have to set to data a default value from TimesheetData.WeekData. Let's say $scope.data = TimesheetData.WeekData[0]

Bailey Miller Over a year ago

I am working on it the first problem though is that inside the dropdown I see [object object] rather than a date

Bailey Miller Over a year ago

Marked as answer because it lead me in the direction that ultimately solved my problem.

|

Saurabh Sarathe · Accepted Answer · 2019-02-15 17:25:08Z

1

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="[email protected]" 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.

edited Feb 15, 2019 at 17:25

answered Jun 16, 2016 at 14:35

Saurabh Sarathe

2312 silver badges11 bronze badges

6 Comments

8protons Over a year ago

Nice answer; quickly written, too.

Saurabh Sarathe Over a year ago

Thank you for the compliment :)

Bailey Miller Over a year ago

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 Over a year ago

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 Over a year ago

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.

|

Collectives™ on Stack Overflow

AngularJS data binding when using ng-repeat

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related