I am using jsonForm to generate a form from 3 different json schemas. When on form is submitted, another form is requested and so on... Data on all 3 form creates ONE json object which is sent back and stored after the last form is filled in.
Forms work as expected, the issue is when updating the list using ng-repeat
HTML:
<ul>
<li ng-repeat="names in newName">{{names}}</li>
<ul>
Default names array:
$scope.newName= ["test1","test2"];
initial object
var set1 = {
"setName": "",
"setAttributes": [],
"setQuestions": []
};
Angular:
$scope.createNewSet = function () {
$http.get('/json/schema1.json').success(function(data) {
$('#form1').jsonForm({ // DISPLAY FIRST FORM
schema: data,
"form": [
"*",
{
"type": "submit",
"title": "Proceed to step 2"
}
],
onSubmit: function (errors, values) {
var sName = values.setName;
set1.setName = sName;
$http.get('/json/schema2.json').success(function(data) {
$('#form2').jsonForm({ //DISPLAY SECOND FORM
schema: data,
"form": [
"*",
{
"type": "submit",
"title": "Proceed to step 3"
}
],
onSubmit: function (errors, values) { // DISPLAY THIRD FORM
set1.setAttributes = values.attributes;
$http.get('/json/schema3.json').success(function(data) {
$('#form3').jsonForm({
schema: data,
"form": [
"*",
{
"type": "submit",
"title": "Proceed to step 4"
}
],
onSubmit: function (errors, values) { // SAVE COMPLETE SET
set1.setQuestions = values.questions;
$scope.newName.push(set1.setName); //UPDATE li
$scope.newName.push('blah')
console.log($scope.newName);
},
});
});
},
Browser console shows updated newName array ["test1","test2","Simo","blah"]
with Simo
and Blah
but HTML doesnt show them. Could there be something preventing angular from updating the DOM?
Thanks..
Try reapplying the scope:
$scope.$apply(function(){
$scope.newName.push(set1.setName); //UPDATE li
$scope.newName.push('blah')
});