Greetings, I am relatively new to Angular and find myself in a bit of a quandary. It seems like the solution to my issue might be simpler than I think.
My Angular App consists of a basic "Page View/Controller" and an "Admin View/Controller" that both utilize the same JSON files for data population.
Naturally, I aim to Carry Out Create, Read, Update, and Delete (CRUD) operations on elements within the Admin View, which essentially means modifying my JSON file.
Here's a snippet from my JSON file:
{
"id": 22,
"title": "",
"section": "expositions",
"text": "2005 : « Ce soir la lune reve » (Casa de Francia et IFAL - Mexico DF)",
"url": "",
"fr": "",
"es": "",
"en": "",
"active": false
},
{
"id": 23,
"title": "",
"section": "expositions",
"text": "2006 : « Ce monde rayonnant » (Espace Triangle - Bruxelles, Belgique)",
"url": "",
"fr": "",
"es": "",
"en": "",
"active": false
}
I have all these elements within my controller's scope:
$http.get('http://example.com/js/texts.json').then(function (result){
$scope.texts = result.data;
});
Everything is functioning as expected, and I can populate my view using ngModel.
<ul class="angular-content">
<li ng-repeat="expo in texts | filter:{section: 'expositions'}">
<h4>
<input type="checkbox" ng-model="expo.active">
<textarea rows="2" cols="124" ng-model="expo.text"></textarea>
</h4>
<h4 ng-show="expo.fr"><a target="_blank" href="{{expo.fr}}">FR</a></h4>
<h4 ng-show="expo.es"><a target="_blank" href="{{expo.es}}">ESP</a></h4>
<h4 ng-show="expo.en"><a target="_blank" href="{{expo.en}}">ANG</a></h4>
</li>
</ul>
The issue arises when I attempt to modify the values of those <textarea>s and update my JSON file accordingly.
$scope.saveTexts = function () {
$scope.newTexts = JSON.stringify($scope.texts);
$http({
method: 'POST',
url: 'http://example.com/js/text.json',
data: $scope.newTexts,
contentType: 'application/json; charset=utf-8',
dataType: 'json'
});
}
I suspect it may be a matter of asynchronous calls or the way I'm implementing JSON.stringify. When I log to the console, my changes do not reflect immediately.
Adding a new element also poses challenges:
If I use this function within an ng-click, the view updates and displays the added element, but it doesn't reflect in $scope.texts
$scope.addExpo = function(){
$scope.texts.push({
"id": 35,
"title": "TEST",
"section": "expositions",
"text": "TEST",
"url": "TEST ",
"fr": "",
"es": "",
"en": "",
"active": true
});
Thank you in advance for your assistance, and apologies for the lengthy post.