I am learning AngularJS and I got a beta project to modify the exisiting model. I cannot post the below form through api. When i click on submit button, the dasboard is senseless. can some one guide me how to move further. This is Angular version:1.6.0. I have passed the ng-submit as startApproval in form element.. But it doesn't workout
index.html
<form ng-controller="RequestController" method="post" ng-submit="startApproval()">
<div class="container">
<div class="row" ng-submit>
<p class="text-info">Please create request...</p>
<!-- Left -->
<div class="col-lg-2">
<div class="panel panel-primary">
<!-- Heading -->
<div class="panel-heading">
<h4>Request</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- process type -->
<div class="groups list list-inset">
<div class="form-group">
<label for="generic_process_id">Select process typ:</label>
<select class="form-control" id="generic_process_id" ng-model="request.approvalObject.generic_process_id" >
<option value="1" ng-show="true" >Simple Process</option>
<!-- <option ng-hide= "true" ng-disabled="true" value="2">2</option>
<option ng-hide= "true" ng-disabled= "true" value="3">3</option>
<option ng-hide= "true" ng-disabled= "true" value="4">4</option>-->
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<!-- Heading -->
<div class="panel-heading">
<h4>Priority</h4>
</div>
<!-- Body -->
<div class="panel-body">
<!-- priority type -->
<div class="groups list list-inset">
<label>Select priority:</label><br>
<div class="btn-group" ng-init="request.approvalObject.priority='1'">
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'1'" uncheckable>Low</label>
<label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'2'" uncheckable>High</label>
</div>
</div>
<hr>
</div>
</div>
</div>
<!-- Center -->
<div class="col-lg-6">
<!-- Description part-->
<div class="panel panel-success">
<!-- Heading -->
<div class="panel-heading">
<h4>Description</h4>
</div>
<pre>{{request.approvalObject|json}}</pre>
<pre>{{request.form|json}}</pre>
</div>
</div>
<!-- Right -->
<div class="col-lg-4">
<!-- value part-->
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Value</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-inset">
<label class="item item-input">
<input type="text" placeholder="" name="value" ng-model="request.approvalObject.value"><b class="text-primary">{{request.approvalObject.value_currency}}</b>
</label>
<br>
</div>
</div>
<div class="panel panel-info">
<!-- Heading -->
<div class="panel-heading">
<h4>Approver</h4>
</div>
<!-- Body -->
<div class="panel-body">
<div class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="First approver name" name="approver1_name" ng-model="request.approvalObject.approver1_name">
</label>
</div>
<!-- show second approver if process type != 1 -->
<div ng-show="secondApprover" class="groups list list-insert">
<label class="item item-input">
<input type="text" placeholder="Second approver name" name="approver2_name" ng-model="request.approvalObject.approver2_name" >
</label>
</div>
</div>
</div>
</div>
</div>
<input type="submit" value="request">
</form>
Controller.js
'use strict';
export default class RequestController {
approvalObject = {};
form = {};
secondApprover = false;
$onInit() {
this.approvalObject.generic_process_id=1;
this.approvalObject.value_currency="EUR";
this.approvalObject.priority=1;
this.form.type=1;
}
/*#ngInject*/
constructor($http, $scope, socket) {
this.$http = $http;
console.log("testentry");
}
startApproval(approvalObject) {
console.log("test");
// creator_email and name from backend
approvalObject.generic_process_id=1;
approvalObject.creator_email= "test1#example.com";
approvalObject.creator_name= "test1";
approvalObject.approver1_email= approvalObject.approver1_name+"#example.com";
approvalObject.approver2_email= approvalObject.approver2_name+"#example.com";
// wip from backend
approvalObject.approval_process_status= "wip";
approvalObject.priority= "super high";
//date_of_creation: '', -->> filled by database
approvalObject.date_of_expiration = undefined;
approvalObject.sending_tool= "Web-App";
approvalObject.submitRequest=true;
this.$http.post('/api/approvals', approvalObject);
}
}
The startApproval(approvalObject)method in your controller expecting input parametar object. but you are calling with out passing any object to the function on ng-submit in your html
you can clear the input parameter in your controller and you can access thos variables in funtion with 'this'keyword like
this.approvalObject.generic_process_id=1;
Related
I am using md-datepicker from angular material. It is working fine except on bootstrap modal. I have applied various solutions like z-index:1200 but none of them proves useful for me.
Following libraries I am using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />
It shows the area when I use inspect element:
Here is the Modal Code:
<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
<div class="modal-dialog">
<form ng-submit="addNewEvent()">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span> Add Event</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="add-member-modl">
<div class="form-group">
<label>Event Name</label>
<input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
<input type="hidden" ng-model="newEvent.event_id">
<ul class="advance_search_inner" ng-show="focusInput">
<li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
{{event.name}}
</li>
</ul>
</div>
<div class="form-group">
<label>Date</label>
<md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
</div>
<div class="form-group">
<label>Duration</label>
<select class="form-control" ng-model="newEvent.duration">
<option value="1 Day">1 Day</option>
<option value="2 Days">2 Days</option>
<option value="3 Days">3 Days</option>
</select>
<!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
</div>
</div>
</div>
<div class="modal-footer mod-footr">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
</div>
Probably the z-index of the modal is higher than the date picker selector. Try to change the datepicker z-index with the following css:
.md-datepicker-calendar-pane {
z-index: 2000;
}
this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});
I have a form with some contents and some buttons. What I want to do is by clicking a button, hide the original contents of the form and load some new contents. Now I have done the hiding part using ng-show . But i'm stuck at loading new contents using ng include. I have included the contents that I want to show inside script tags and tried to load on button click.
This is what I have done.
<!DOCTYPE html>
<html lang="en">
<div class="container">
<form role="form" id="info_form" name="info_form" ng-controller="infoCtrl" ng-app="app" novalidate>
<section class="content-header">
<h1>
Fill your medical information
<!--<small>Optional description</small>-->
</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="box">
<div class="box-body" ng-show="table_remove" >
<div>
<div class="col-lg-12">
<div style="margin-top: 15px;width: 100%;">
<!--first block-->
<div style="float: left;width: 33%;height: 100%">
<div class="form-group">
<label class="info_ques_text">Maximum Heart Rate</label>
<div class="input-group">
<input class='input' type="number" name="Heart" id="Heart" class="form-control" ng-model="data.heart_rate" placeholder="Enter Value" required><br>
<span class="error_msg" ng-show="submitted && info_form.Heart.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
<!--third block-->
<div class="form-group">
<label class="info_ques_text">How Long Do You Work Per Day?</label>
<div class="input-group">
<select class='input' name="Work" id="Work" ng-model="data.work" ng-selected="" required>
<option value="" disabled selected>Select Your Option</option>
<option value="0">4-5 Hours</option>
<option value="1">5-6 Hours</option>
<option value="2">6-7 Hours</option>
<option value="3">More than 7 Hours</option>
</select><br>
<span class="error_msg" ng-show="submitted && info_form.Work.$error.required">Value cannot be blank</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer" ng-show="table_remove">
<button href="" type="submit" ng-click="submitted = true; train(data);" class="btn btn-primary">Train data</button>
<button href="" type="submit" ng-click="submitted = true; submit(data); template = 'predictview'" class="btn btn-primary">Submit</button>
<a type="button" class="btn btn-danger" href="{{url()}}/admin/organizations/view">Cancel</a>
</div>
</div>
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="predictview">
<div class="container" ng-controller="questionEditCtrl" >
<form class="form-horizontal" role="form" name='quizAdd' ng-submit="submit(data2)">
<a> New page </a>
</form>
</div>
</script>
</section><!-- /.content -->
</form>
</div>
</html>
I'm facing the following problem: When I try to instantiate a modal
angular.module('previewApp')
.controller('DienstleisterCtrl', function (dienstleisterRegObjService, staticDataService, $uibModal) {
var vm = this;
vm.dienstleisterTypen = staticDataService.getDienstleisterTypen();
vm.modRegObj = function (dienstleistertyp) {
dienstleisterRegObjService.vorselektiertesProdukt.typ = vm.dienstleisterTypen[dienstleistertyp];
var modalInstance = $uibModal.open({
templateUrl: 'scripts/angular/modals/templates/regform.html',
controller: 'RegFormCtrl as vm'
});
};
});
it throws in the modal controller
angular.module('previewApp')
.controller('RegFormCtrl', function (**$uibModalInstance**, dienstleisterRegObjService, staticDataService, fieldValidator) {
});
the error:
[$injector:unpr] Unknown provider: $uibModalInstanceProvider <-
$uibModalInstance <- RegFormCtrl
This is the modal:
It has two forms, one nested in the other.
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" style="padding-right: 0px;">
<div class="modal-content">
<div class="close-modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<div class="form-horizontal" ng-form="regForm">
<fieldset>
<legend class="text-center">
<div class="panel formular-head">
<h3 class="formular-title">Registrieren</h3>
<p class="text-muted formular-description"></p>
</div>
</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="organisation">Organisation</label>
<div class="col-md-6">
<input id="organisation" name="organisation" type="text" placeholder="z.B. Muster Catering GmbH" class="form-control input-md" ng-model="vm.regObj.organisation" ng-readonly="vm.orgReadOnly" ng-change="vm.checkValue('org')" ng-required="!vm.orgReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="vorname">Vorname</label>
<div class="col-md-6">
<input id="vorname" name="vorname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.vorname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="nachname">Nachname</label>
<div class="col-md-6">
<input id="nachname" name="nachname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.nachname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email</label>
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="max#muster.ch" class="form-control input-md" ng-model="vm.regObj.mail" ng-required="true" ng-pattern="vm.getMailChecker();">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="natio">Nationalität</label>
<div class="col-md-6">
<select id="natio" name="nationalitaet" class="form-control" ng-model="vm.regObj.nationalitaet">
<option ng-value="vmnat" ng-repeat="vmnat in vm.nationalitaeten">{{vmnat}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sprache">Sprache</label>
<div class="col-md-6">
<select id="sprache" name="sprache" class="form-control" ng-model="vm.regObj.sprache">
<option ng-value="vmsprache" ng-repeat="vmsprache in vm.sprachen">{{vmsprache}}</option>
</select>
</div>
</div>
<div class="form-group produkt-katalog" ng-show="!vm.regObj.produkte.length == 0">
<label class="col-md-4 control-label produkt-label"></label>
<div class="col-md-6">
<div class="" ng-repeat="vmprod in vm.regObj.produkte track by $index">
<produkt-item produkt="vmprod"></produkt-item>
</div>
</div>
</div>
<div ng-form="produktForm">
<div class="formular-together panel shadowed">
<div class="form-group">
<label class="col-md-4 control-label" for="dienstleistertyp">Dienstleistung</label>
<div class="col-md-6">
<select id="dienstleistertyp" name="dienstleistertyp" class="form-control" ng-model="vm.vorselektiertesProdukt.typ" ng-required="vm.regObj.produkte.length == 0">
<option ng-value="vmtyp" ng-repeat="vmtyp in vm.typen">{{vmtyp}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="produkt">Produkt</label>
<div class="col-md-6">
<input id="produkt" name="produkt" type="text" placeholder="z.B. Lautsprecher, Dekoration, Helfer, Stilrichtung" class="form-control input-md" ng-model="vm.vorselektiertesProdukt.produkt" ng-required="vm.regObj.produkte.length == 0 || vm.vorselektiertesProdukt.typ !== ''">
</div>
</div>
<div class="form-group">
<label class="col-md-4"></label>
<div class="col-md-6">
<button type="button" class="btn btn-default pull-right" name="submit" ng-click="vm.addProduct()" ng-disabled="produktForm.$invalid || vorselektiertesProdukt.produkt == ''">Hinzufügen</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-6">
<div class="pull-right">
<button id="abbrechen" name="abbrechen" class="btn btn-default">Abbrechen</button>
<button id="registrieren" name="registrieren" class="btn btn-default" ng-disabled="regForm.$invalid || regObj.produkte.length == 0" ng-click="vm.registrieren()">Registrieren</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Ende -->
In the app.js ui-bootstrap is declared, also in the index.html.
angular
.module('previewApp', [
'ngAnimate',
'ngSanitize',
'ngResource',
'ngTouch',
'ngMessages',
'ui.bootstrap',
'ngToast'
]);
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/ngToast/dist/ngToast.js"></script>
This problem gives me headache, cause I know it's just a little fault, but in the last hours i tried nearly everything an nothing changed.
Help is very appreciated. I'll post an plunkr in the answers...
OK... I've no idea why or how it works but it does.
I did the following:
I changed "controller as" in creating modal plus removed named controllers from my index.html and replaced them by $scope.
I added in dienstleister.js, where the modal is beeing created, the modalinstance.result.then functions
Now there is no error anymore. If someone has an idea why it now works i would appreciate an explanation.
Thanks for your time guys.
I have a form to generate JSON format in bottom we can see. I will select name and control that need to display.How ever from the JSON data which I get from this form. I need to display all the controls in another form or same form. if I select Textbox it should display textbox.
if any one knows to display or render the controls from JSON that will great helpfull.
Here is the code:
var app = angular.module('Example',[]);
app.controller("ExampleController",function ($scope){
$scope.Controls=[];
$scope.master= {};
$scope.update = function(user) {
// Example with 1 argument
debugger;
$scope.Controls.push(angular.copy(user));
$scope.master= $scope.Controls;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body ng-app="Example">
<table class="table table-striped">
<tr>
<td style="width:60%">
<div class="panel panel-default" style="">
<div class="panel-heading">Screen Builder</div>
<div class="panel-body">
<div class="panel panel-default form-left" >
<div class="panel-body" ng-controller="ExampleController">
<div class="row">
<div class="col-md-offset-1 col-md-10" >
<form class="form-horizontal " ng-submit="update(user)">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label >Form Name :</label>
</div>
<div class="col-md-8">
<input type="text" ng-model="user.Form">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label >Control :</label>
</div>
<div class="col-md-8 text-justify">
<div class="row">
<div class="col-md-6">
<input type="radio" name="Label" value="Label" ng-model="user.Control.type">Label
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Combo" ng-model="user.Control.type">Combo
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Edit Combo" ng-model="user.Control.type">Edit Combo
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Combo Grid" ng-model="user.Control.type">Combo Grid
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Date" ng-model="user.Control.type">Date
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Date Time" ng-model="user.Control.type">Date Time
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Number" ng-model="user.Control.type">Number
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Check Box" ng-model="user.Control.type">Check Box
</div>
<div class="col-md-6">
<input type="radio" name="Label" value="Option Button" ng-model="user.Control.type">Option Button
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label >Caption :</label>
</div>
<div class="col-md-8">
<input type="text" ng-model="user.Control.value">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="submit" style="width: 60px" value="Submit">
</div>
</div>
</form>
<pre>master = {{master | json}}</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td style="width: 60%"></td>
</tr>
</table>
</body>
Here's one way of doing it - Plunker.
It's a simple example that doesn't add all the elements in the main form but it is to show you how it could be done. The idea is to have a dummy form that you append elements to.
JS
app.controller("ExampleController",function ($scope, $element){
$scope.Controls=[];
$scope.master= {};
var newForm = angular.element($element[0].querySelector('#newForm'));
$scope.update = function(user) {
// Example with 1 argument
$scope.Controls.push(angular.copy(user));
$scope.master= $scope.Controls;
if (user !== undefined) {
var element = "";
if (user.Control.type == "Label") {
if (user.Control.hasOwnProperty("value")) {
element = "<div class='col-md-6'><label>" + user.Control.value + "</label></div>";
}
else {
element = "<div class='col-md-6'><label>Label</label></div>";
}
}
else if (user.Control.type == "Check Box") {
if (user.Control.hasOwnProperty("value")) {
element = "<div class='col-md-6'><input type='checkbox'>" + user.Control.value + "</input></div>";
}
else {
element = "<div class='col-md-6'><input type='checkbox'></input></div>";
}
}
newForm.append(element)
}
};
});
Markup
<!-- New form -->
<br>
<div>
New Form:
<form id="newForm" class="form-horizontal ">
</form>
</div>
Let me know if you want to add the elements by traversing the JSON instead.