accessing ng-form elements/values with ng-repeat - javascript

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

Related

Angularjs How to bind a json attribute(Set or array) to a dynamic input 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

ng-repeat causes form elements to not display

I am trying to dynamically add a form input in AngularJS every time the add button is clicked. However, with the code I have, it the input elements don't display at all. I simply see the "Post" button. If I remove the ng-repeat="ingredient in ingredients", the form displays (as expected). What am I doing wrong here?
Here is the specific code in index.ejs:
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
Here is the corresponding js code:
app.controller('MainCtrl', [
'$scope',
'posts',
'auth',
function($scope, posts, auth){
$scope.ingredients = [];
$scope.add = function() {
var newItemNo = $scope.ingredients.length+1;
$scope.ingredients.push({'id':'choice'+newItemNo});
};
}]);
That's because your button is in the ng-repeated element. ng-repeat repeats the HTML inside the element it is assigned to. Since you have no items in ingredients, nothing is rendered - including your button
Just move your button out of <div class="form-inline">.
Your add button is inside the ng-repeat, so it's never shown, so you can never populate the array, so it can't ever show. Does that make sense?
Try
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>

How to bind using the ng-model in angular js

I just started using angular js and I was playing with the ng-model directive but I can't figure out what im doing wrong. I want the input email value to show in the h1 tag as I'm typing. pretty much I'm not getting anything show in the h1 tag as I type.
<body ng-app="starter">
<ion-pane>
<ion-content style="margin-top: 163px">
<div ng-controller="loginController">
<form action="">
<div class="row">
<div class="col col-50 col-offset-25">
<div class="card">
<div class="item item-text-wrap">
<div class="list">
<label class="item item-input">
<i class="icon ion-email placeholder icon"></i><input type="email" placeholder="Email" ng-model="email" />
<h1>{{email}}</h1>
</label>
<label class="item item-input">
<i class="icon ion-locked placeholder-icon"></i><input type="text" placeholder="Password" />
</label>
<br/>
<button class="button button-full button-positive">Clock Me In</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</ion-content>
</ion-pane>
</body>
this is my javascript
var app = angular.module('starter', ['ionic'])
app.controller('loginController', function($scope)
{
})
Your changes are not displayed on screen because while you are typing the email it is invalid. Invalid values are reflected to $scope as null, so there is nothing to show.
As suggested in comments, you can change it type="text". Since you removed validation, you'll see the text on both screen and in your $scope, however you'll sacrifice validation.
If you still want to use email validation, and want to see it in screen/$scope you can use ng-model-options as described here.
Using ng-model-options you can allow invalid values to be stored in your $scope.
Try adding ng-model-options="{allowInvalid: true}" to your type="email" input.

Form submit doesn't update model bound to radiobutton

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

ngSubmit not getting submitted

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

Categories