CODEWITHSUNDEEP
javascripthtmlangularjs
Howard Combs
Howard Combs

Reputation: 133

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

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>

Upvotes: 1

Views: 1136

Answers (1)

datasedai
datasedai

Reputation: 982

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

Upvotes: 1

Related Questions