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>
