As I create a form to update information in a database, everything seems to be functioning properly. The selected data is being retrieved correctly; however, it is not displaying in the text inputs on the webpage.
Although the information appears correct in the console and in the 'value' attribute, it does not show up on the page itself.
This particular page contains two text input fields:
<label for="meetingPoint">Name:</label>
<input type="text" class="form-control" name="name" rows="5" ng-value="{{ data[0].name }}" ng-model="formData.name" />
<label for="meetingPoint">Meeting Point:</label>
<input type="text" class="form-control" name="meetingPoint" rows="5" ng-value="{{ data[0].meetingPoint }}" ng-model="formData.meetingPoint" />
I aim to have the information displayed on the page while still being sent to my formData scope. However, I am currently struggling as this is my first time working with Angular.
Here is my controller:
var event = $routeParams.evento;
$scope.data;
$scope.submitForm;
$scope.formData = {};
$http.get('/api/data/event/edit/' + event)
.success(function (data, status, headers, config) {
$scope.data = data;
console.log(data);
})
.error(function (data, status, headers, config) {
$scope.data = data;
});
$scope.processForm = function () {
console.log($scope.formData._id);
$http({
method: 'PUT',
url: '/api/data/event/edit' + $scope.formData._id,
data: $scope.formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.success(function (data) {
console.log(data);
if (!data.success) {
$scope.errorName = data.errors.name;
} else {
$scope.message = data.message;
}
});
};
Despite retrieving the desired event and attempting to display the information using ng-value, I am facing challenges. Additionally, I am working on editing my formData object.
If anyone could offer me assistance, I would greatly appreciate it! :)
Thank you so much!