This question already has an answer here:
anjularjs push value to nested ng-repeat
(1 answer)
Closed 6 years ago.
<!-- Angular.JS Form to JSON -->
var formApp = angular.module('formApp', []).controller('formController', ['$scope', function ContactController($scope) {
$scope.form = [];
$scope.milestone_subindicator = {data:'',year:'' , data:'',year:''
}
$scope.push_form = function(){
$scope.form.push({name:'',milestone:[]})
};
}]);
<!-- Form -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
{{form}}
<button type="button" class="success button" ng-click="push_form()">Add</button><!-- Add form -->
<body ng-app="formApp" ng-controller="formController">
<div class="row" ng-repeat="f in form track by $index">
<input type="text" placeholder="G1" data-ng-model = "f.name"></input> // name of the orgranisation
<div class="row" ng-repeat = "mil in milestone_subindicator track by $index"> // milestones
<div class="medium-2 columns">
<label>Data
<input type="text" placeholder="data" ng-model="mil.data">
<input type="text" placeholder="year" ng-model="mil.year">
</label>
</div>
</div>
</div>
</body>
In the example above as you can see the output of {{form}} i need to put the value of mil in milestone_subindicator to be pushed in milestone array in the form . I have no idea how do i achieve that ?
Help will be appreciated :)
Thank you guys .Finally,i found solution to my answer.
var formApp = angular.module('formApp', []).controller('formController', ['$scope', function ContactController($scope) {
$scope.form = [];
$scope.milestone_subindicator = {data:'',year:'' , data:'',year:''
}
$scope.push_form = function(){
$scope.form.push({name:'',milestone:[]})
};
$scope.push_cat = function(index,data){
console.log(data);
$scope.form[index].milestone.push(data);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
{{form}}
<button type="button" class="success button" ng-click="push_form()">Add</button>
<body ng-app="formApp" ng-controller="formController">
<div class="row" ng-repeat="f in form track by $index">
<input type="text" placeholder="G1" data-ng-model = "f.name"></input>
<div class="row" ng-repeat = "mil in milestone_subindicator track by $index">
<div class="medium-2 columns">
<label>Data
<input type="text" placeholder="data" ng-model="mil.data">
<input type="text" placeholder="year" ng-model="mil.year">
</label>
</div>
<button ng-click="push_cat($parent.$index,mil)">add cat</button>
</div>
</div>
</body>
Related
Is there a way in angular js to push a list of managers(or any item) to an array with validation in angular. I basically want to create an array as the ng-model and still validate it. Is this possible to do or am i going about it the wrong way?
var app = angular.module("FormTest",[]);
app.controller("AppCtrl", ["$scope", function($scope){
var appCtrl = this;
appCtrl.appName = "Form Array";
$scope.managers = [""];
$scope.form = {};
$scope.form.managers = $scope.managers;
$scope.addManager = function(){
$scope.managers.push('');
}
$scope.removeManager = function(index){
if($scope.managers.length > 1){
$scope.managers.splice(index, 1);
}
}
}])
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector('html'), ["FormTest"]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="AppCtrl as app">
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<div class="btn btn-primary" ng-click="addManager()">add manager</div>
</div>
</div>
<form novalidate name="form">
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
</div>
<div class="col-md-1">
<div class="btn btn-default">
<span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
</div>
</div>
</div>
</div>
</form>
</div>
In your example, all right, except for that of the regular expression.
Look at the example code jsfiddle.
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<button class="btn btn-primary" ng-click="addManager()">add manager</button>
</div>
</div>
<form novalidate name="form">
Form valid={{form.$valid|json}}
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
{{form['manager'+$index].$error}}
</div>
<div class="col-md-1">
<div class="btn btn-default">
<button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
</div>
</div>
</div>
</div>
</form>
So I have an input form which looks like this
<div>
<div class="form-group">
<label for="inputQuestion" class="col-sm-2 control-label">Question</label>
<div class="col-sm-10">
<input data-ng-model="publication.question" type="text" class="form-control" id="inputQuestion" placeholder="Question">
</div>
</div>
<br>
<br>
<ul id="itemContainer">
</ul>
</div>
<button type="submit" data-ng-click=addItem() data-ng-click=currentid=currentid+2 class="btn btn-info">Add Item</button>
The add Item button adds items in the ul itemContainer using js code running on the controller what I want to do now is to bind the items in the itemContainer with an array attribute of the "publication" lets say "publication.options" how can I achieve that ?
In case you believe my approach is totally wrong I would appreciate other ways of achieving the same result !
Thanks for your help in advance !
I think the best way is to have an array of questions and push each time the new question inside
Controller
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.publication = {
question: "Is it good ?",
options: []
};
$scope.addItem = function() {
$scope.publication.options.push($scope.inputQuestion);
}
}]);
View
<body ng-controller="MainController">
<div>
<div class="form-group">
<label for="inputQuestion" class="col-sm-2 control-label">Options</label>
<div class="col-sm-10">
<input data-ng-model="inputQuestion" type="text" class="form-control" id="inputQuestion" placeholder="Write here...">
<button type="submit" ng-click="addItem()" class="btn btn-info">Add Option</button>
</div>
</div>
<br>
<br>
<h1 class="col-sm-2">Question: {{publication.question}}</h1>
<hr/>
<ul ng-repeat="question in publication.options">
<li>{{question}}</li>
</ul>
</div>
</body>
Working example here
I'm looking for the best way to pass non-binding (correct term?) form data to a controller method. How would I go about accessing the object of the form and it's values?
html
<html ng-app="app">
<body ng-controller="MainController as main">
<ng-form name="add_lead_form">
<div ng-repeat="label in form.lead_labels track by $index" ng-show="label.visible">
<div class="input-group lead-data">
<span class="input-group-addon">{{getLabel(label)}}</span>
<input ng-model="add_lead_form.addleadValue[$index]" name="addleadValue" type="text" class="form-control" aria-describedby="basic-addon1">
<input type="hidden" ng-model="add_lead_form.addleadLabelId[$index]" name="add_lead_form.addleadLabelId" ng-value="label.id" />
</div>
</div>
<div class="pull-right"><button ng-click="addLead()" class="btn btn-primary btn-lg">Save Lead</button></div>
</ng-form>
</body>
</html>
app.js
var app = angular.module('app', []);
app.controller('MainController', ['$scope', function($scope) {
$scope.addLead = function() {
console.log($scope.add_lead_form);
};
}]);
You could not access form inside ng-repeat which has been declared in parent div, For creating proper form you could add new innerForm inside your ng-repeat, You must need to change your html structure by adding new innerForm
<div ng-repeat="label in form.lead_labels track by $index" ng-show="label.visible">
<ng-form name="innerForm">
<div class="input-group lead-data">
<span class="input-group-addon">{{getLabel(label)}}</span>
<input ng-model="add_lead_form.addleadValue[$index]" name="innerForm.addleadValue" type="text" class="form-control" aria-describedby="basic-addon1">
<input type="hidden" ng-model="add_lead_form.addleadLabelId[$index]" name="innerForm.addleadLabelId" ng-value="label.id" />
</div>
</ng-form>
</div>
Give a try by using above code, Thanks
Here is my HTML:
<form role="form" ng-submit="submit()">
<div class="form-group">
<div class="radio" ng-repeat="answer in answers">
<label>
<input type="radio" name="answer" ng-model="submittedAnswer" value="{{$index}}" /> {{ answer }}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Далее</button>
</div>
</form>
And in angular controller I have this code:
$scope.submittedAnswer = 0;
$scope.submit = function () {
answers.push($scope.submittedAnswer);
console.log($scope.submittedAnswer);
}
On submit I'm always getting 0. It seems that problem only about radiobutton. I've tried to bind model to simple text input and all worked fine. Any suggestions? BTW, is there any way to avoid initializing of model (I don't want any radiobutton to be checked initially)?
You have to use $parent inside the ng-repeat model to bind your model.
var myapp = angular.module('myApp',[]);
myapp.controller('myController', function($scope){
$scope.answers = ['One','Two','Three'];
$scope.submit = function(){
console.log($scope.submittedAnswer);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<form role="form" ng-submit="submit()" ng-init="submittedAnswer = 0">
<div class="form-group">
<div class="radio" ng-repeat="answer in answers">
<label>
<input type="radio" name="answer" ng-model="$parent.submittedAnswer" value="{{$index}}" /> {{ answer }}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Далее</button>
</div>
</form>
</div>
</div>
This is the exact reading you need to understand why. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance
I am pretty much beginner with AngularJS, and I am trying to submit a form, as follows:
<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController"> </div>
This is my searchForm.html:
<div class="container">
<div class="row">
<div class="col-md-14">
<div class="well">
<div class="col-md-9">
<form ng-submit="submit()" class="form-horizontal clearfix" role="form" >
<div class="form-group">
<label for="teamName" class="col-md-3 control-label">Team name</label>
<div class="col-md-9">
<input type="text" ng-model="myName" id="myName" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-0"></div>
<button ng-click="onFormReset()" class="btn btn-default">Reset</button>
<input type="submit" id="submit" class="btn btn-primary" value="Search"/>
</div>
</form>
{{teamName}}
</div>
</div>
</div>
UPDATE
Controller:
angular.module('MyApp')
.controller('MySearchFormController', ['$scope', function($scope){
$scope.submit = function (){
if ($scope.myName) {
alert($scope.myName);
$scope.teamName = this.teamName;
}
}
}]);
What is currently happening is the text is automatically appearing in the {{teamName}} field.
Instead, I would like to make it work only onSubmit(), namely clicking the Search button.
You can try like this :
function demo ($scope) {
$scope.submit = function () {
$scope.submitted = true;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p ng-if="submitted">{{ teamName }}</p>
</div>
BUT it is not optimal, as once you submitted one time, $scope.submitted is true and you will get the same problem, again.
SO, I would recommend you to not bind your {{ teamName }} to the same reference as the input :
function demo ($scope) {
$scope.submit = function () {
$scope.teamNameCopy = angular.copy($scope.teamName);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p>{{ teamNameCopy }}</p>
</div>
OK, the issue is resolved.
Unfortunately, that was an issue related to incorrectly closing html tags, and not