I am facing an issue with ng-repeat in my application. It successfully fetches values from the database and displays them in input text fields. However, when I update these values and click the save button, the updated values are not being saved. Can someone please provide guidance on resolving this issue?
<div ng-controller="education" ng-init="getEducationDetails();">
<div class="col-md-12">
<div class="row" ng-repeat="values in education"
style="margin-left: 20px; margin-right: 20px; margin-top: 10px;">
<div class="col-md-6">
<h4>
<small>Degree</small>
</h4>
<input type="text" id="educationDegree" name="educationDegree"
value="{{values.education_degree}}" style="width: 90%;" />
</div>
<div class="col-md-6">
<h4>
<small>Year</small>
</h4>
<input type="text" id="educationYear" name="educationYear"
value="{{values.education_year}}" style="width: 100%;" />
</div>
<div class="col-md-12" style="margin-top: 10px;">
<h4>
<small>University</small>
</h4>
<input type="text" id="educationUniversity"
name="educationUniversity"
value="{{values.education_university}}" style="width: 100%;" />
</div>
</div>
</div>
<div class="col-md-12" style="margin: 20px;">
<button ng-click="educationSave();" class="btn btn-default">Save</button>
</div>
</div>
After clicking the Save button, I use the educationSave() method to save the values. However, I noticed that the education array within the method contains the old values instead of the updated ones. How can I ensure that it captures the latest changes made to the input fields?
Below is how I retrieve the values:
$scope.getEducationDetails = function()
{
$http({
method : 'GET',
url : '/getEducationDetails'
}).success(function(data, status, headers, config) {
$scope.education = data.resultSet;
alert($scope.education);
}).error(function(data, status, headers, config) {
});
};
And here is my controller method for saving the values:
$scope.educationSave = function() {
var educationArray = JSON.stringify($scope.education);
//The educationArray is then saved
};