How do I update table values on $scope value change in Angular js?

Question

Just learning Angular js. I am attempting to update values on a table based off of an array stored inside a service.

The issue that I am having is that the table in html is not updating when the scope value for the variable $scope.names changes in the exercise controller. I am 100% positive that the code in the exercise service functions correctly and the angular tags in the html are correct. I have included the sections of my code for the html page, controller, and service below.

angular.module('howardsiteApp').controller('exerciseCtrl', function($scope, pageFooter, exerciseService) {
  pageFooter.setfooterText('Exercise Tracker');
  $scope.action = 'Add Exercise';
  $scope.names = [];
  $scope.days = [{
    value: "Monday",
    text: "Monday"
  }, {
    value: "Tuesday",
    text: "Tuesday"
  }, {
    value: "Wednesday",
    text: "Wednesday"
  }, {
    value: "Thursday",
    text: "Thursday"
  }, {
    value: "Friday",
    text: "Friday"
  }];

  $scope.getVal = function(item) {
    var temp = exerciseService.getExercises(exerciseService.getDayIndex(item.value));
    $scope.names = [];
    for (var i = 0; i < temp.length; i++) {

      //THIS IS THE VALUE I WANT DISPLAYED IN THE TABLE
      $scope.names.push({
        n: temp[i]
      });
    }


    //I CAN SEE THE VALUE CHANGING BUT MY TABLE DOESN'T UPDATE  
    console.log($scope.names);
  };
});


'use strict';

angular.module('howardsiteApp').service('exerciseService', function() {

  var exerciseDays = [{
      day: "Monday",
      exercises: []
    }, {
      day: "Tuesday",
      exercises: []
    },
    //DUMMY VALUES TO MAKE SURE THAT DATA WAS ACTUALLY BEING PASSED TO THE CONTROLLER
    {
      day: "Wednesday",
      exercises: ["test"]
    }, {
      day: "Thursday",
      exercises: ["this"]
    }, {
      day: "Friday",
      exercises: []
    }
  ];

  return {
    getDayIndex: function(key) {
      for (var i = 0; i < exerciseDays.length; i++) {
        if (exerciseDays[i].day === key) {
          return i;
        }
      }
    },
    getExerciseIndex: function(index, key) {
      for (var i = 0; i < exerciseDays[index].exercises.length; i++) {
        if (exerciseDays[index].exercises[i] === key) {
          return i;
        }
      }
    },
    addExercises: function(index, key) {
      exerciseDays[index].exercises.push(key);
    },
    removeExercise: function(index, key) {
      var temp = exerciseDays[index].exercises[(exerciseDays[index].exercises.length) - 1];
      exerciseDays[index].exercises[key] = temp;
      exerciseDays[index].exercises.length = exerciseDays[index].exercises.length - 1;
    },
    getExercises: function(key) {
      return exerciseDays[key].exercises;
    }
  };
});

<div id="viewOne">
  <h1><b>Add Exercise</b></h1>
  <h2><i>Select day</i>  <select ng-model="daySelect" ng-controller="exerciseCtrl" ng-options="d.text for d in days" ng-change="getVal(daySelect)">
  </select></h2>
  <table class="table">
    <tr>
      <th class="text-center">Name</th>
      <th class="text-center">Option</th>
    </tr>
    <tr data-ng-controller="exerciseCtrl" data-ng-repeat="name in names">
      <td>{{name.n}}</td>
      <td>
        <button class="btnSubmit">Delete</button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" placeholder="ex. pushup" />
      </td>
      <td>
        <button class="btnSubmit">Add</button>
      </td>
    </tr>
  </table>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

So my angular is a bit rusty, but from this and this answer, it seems like you're creating two instances of your controller. Then, the first exerciseCtrl controller is probably getting the 'getVal()' event, updating its internal state, while the second exerciseCtrl still has the original value of $scope.names...

edited May 23 '17 at 11:50

Community

1
1

answered Feb 19 '16 at 22:38

datasedai

922
7
10

Thank you! I removed the extra ng-controller tag in the html and that solved everything! I would have never thought that extra tags would create separate controller instances. – Howard Combs Feb 19 '16 at 22:48

How do I update table values on $scope value change in Angular js?

1 Answers1