I have a problem. When I use static template on render page
<form name="AddArticle" ng-submit="addArticle()" class="form add-article">
<input type="text" value="first" init-from-form ng-model="article.text[0]" />
<input type="text" value="second" init-from-form ng-model="article.text[1]" />
</form>
And when I do submit form, I get data:
{text : {0: "first", 1: "second"}}
But I have dynamic moment. By clicking I add dynamic input
$(".button").click(function(){
$('.form').append('<input ng-model="article.info" init-from-form type="text" />');
})
Ok. All appended, but by submit I still get data without dynamic input.
Tell me please, how to get all fields form???
Number one, don't mix jQuery like that when you can use angular. Try something like this:
view
<form name="AddArticle" ng-submit="addArticle()" class="form add-article">
<p ng-repeat="object in data track by $index">
<input type="text" ng-model="object.text" />
</p>
</form>
<button ng-click="addInput()">
add
</button>
{{data}}
</div>
controller
angular.module("app", [])
.controller("testCtrl", function($scope) {
$scope.data = [];
$scope.addInput = function() {
$scope.data.push({});
}
})
https://jsfiddle.net/pntd3kaf/
Related
I've constructed a simple form using angular.
I want that once the user enter some value and then press enter - the ng-click function (in this case updateMsg({name: name,room: room})) will be run.
However, this code does not work like that.. the function run only after pressing the button (not like I want - enter keyboard value, then enter..)
Code is below...
help please?
Thanks
<body>
<div class="Member">
<h1>Sign In</h1>
<form name="myForm" ng-submit="updateMsg({name: name,room: room})">
Please enter your details:
<br>
Name: <input name="name" ng-model="name" autocomplete="off">
<br>
Room: <input name="room" ng-model="room" autocomplete="off">
<br>
<button type="button" ng-click="updateMsg({name: name,room: room})">
Enter
</button>
</form>
</div>
</body>
You should not use ng-click and ng-submit directives together. Add type="submit" to your button like this:
<button type="submit">Enter</button>
and keep only ng-submit:
<form name="myForm" ng-submit="updateMsg({name: name,room: room})">
Please enter your details:
<br> Name:
<input name="name" ng-model="name" autocomplete="off">
<br> Room:
<input name="room" ng-model="room" autocomplete="off">
<br>
<button type="submit">Enter</button>
</form>
Also there is no point in doing ng-submit="updateMsg({name: name,room: room})" to pass your updated data like that. Since you are using ng-model you are ready to go. You can declare your scope vars initially in the controller and when the form gets submitted you can use them right away. Because of dual-binding your vars will be already updated:
angular
.module('myApp', [])
.controller('MemberController', ['$scope', function($scope) {
$scope.name = '';
$scope.room = '';
$scope.updateMsg = function() {
// use updated $scope.name in here
// use updated $scope.room too
}
}]);
A small plunker to help you some more.
I think the button should have type=submit instead.
<button type="submit">
instead of
<button type="button" ng-click="updateMsg({name: name,room: room})">Enter</button>
Are you calling a event.preventDefault() method so the form doesn't submit by default? Maybe share the code where you're creating the updateMsg({name: name,room: room}).
I am creating form in angularjs. In that, I am creating add more fields functionality by clicking on "Add more" button. I've implemented add more functionality using javascript.
Below is the code for HTML:
<form method="POST" name="form" ng-submit="insert(user)" role="form">
<div class="top_gets" id="innerdivs">
<input ng-model="user.amount" type="text"/>
<input ng-model="user.description" type="text"/>
<input type="submit" onclick="addMore();" value="Add more"/>
<input type="submit" value="Save & Continue" class="save_gets" />
</div>
</form>
Below is Javascript Code:
<script>
var counter = 0;
function addMore() {
counter += 1;
var div = document.getElementById('innerdivs');
var innerdiv = '<div id="innerdivs"><!-- Same Form Field Elements---></div>';
$('#innerdivs').append(innerdiv);
}
</script>
My problem is, whenever I add more fields by clicking on "Add more" button and submit the form, then only first loaded input fields posts/sends the data means newly appended field input does not posts the data. Whatever the fields are appended using javascritpt that won't works that is form does not sends/posts the inputs. This works with core PHP but it does not works in angularjs. Is there any way to fix this in angularjs?
You are doing it absolutely wrong. You shall not add dom elements manually. Instead, you shall have array in controller and push new object in it:
<form name="form" ng-submit="save(users)" role="form" ng-controller="addUserCtrl">
<div class="top_gets" ng-repeat="user in users">
<input ng-model="user.amount" type="text" />
<input ng-model="user.description" type="text"/>
<input type="button" ng-click="addMore();" value="Add more" />
<input type="submit" value="Save & Continue" class="save_gets" />
</div>
</form>
In controller:
angular.module(<module_name>).controller('addUserCtrl', ['$scope', function (scope) {
scope.users = [{}];
scope.addMore = function () {
scope.users.push({});
};
scope.save = function () {
// send `scope.users` to server with $http or $resource
};
}]);
I am using angular js version 1.2.
Basically i am creating object in server based on screen to do this i need to pass to server
how can i convert a 'div' onload of screen to json using angularjs?
html looks likes this:
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" />
<input ng-model="user.lastName" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
js :
function MyCtrl($scope) {
$scope.user = { };
}
jsfiddele: http://jsfiddle.net/bpbhat777/2grw1je0/
i want it to be like this
http://jsfiddle.net/bpbhat777/dbg2u5ck/
without setting firstname and lastName .It need not to be firstname and lastName , in screen ng-model may be any object
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" ng-init="user.firstName=''" />
<input ng-model="user.lastName" ng-init="user.lastName=''" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
and remove $scope.user = { }; from controller
WITHOUT ng-init
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" />
<input ng-model="user.lastName"/>
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
function MyCtrl($scope) {
$scope.user = {firstName:'',lastName:''};
}
i don't have any idea what the use of it. but if you really need that ng-init might be the option
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" ng-init="user.firstName=''" />
<input ng-model="user.lastName" ng-init="user.lastName=''" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>{{user | json}}
check the demo fiddle
You are looking for angular.toJson()
https://docs.angularjs.org/api/ng/function/angular.toJson
There are several ways to update $scope on page load. I personally prefer to use init():
$scope.init = function() {
$scope.json = angular.toJson($scope.user);
}
$scope.init();
Fiddle: http://jsfiddle.net/dbg2u5ck/2/
After reading and re-reading your question, it seems to me you want to populate the $scope with pre-loaded html values (an empty string in your case). This is not the way Angular works, please take the time to read this article if you want to populate $scope with html values: Angular js init ng-model from default values
Please help: hitting my head all the way,I am a new-bee to angular js, building a Quiz Application using angular js,
I have an issue adding array of nested properties to my controller
jsfiddle link showing the issue:
STEP BY STEP SCENARIO
I want to add a question
each question has 4 options, out of which 1 is selected as right
I am able to get the UI but binding is not working for Options
html is as below:
<div ng-app>
<div class="new-question-container" ng-controller="newQuestionController">
<h3>Add New Question</h3>
<form class="new-question-form" novalidate name="newQuestionForm" data-ng-submit="save()">
<div>
<label for="QuestionDescription">Quesiton Description</label>
<input type="text" name="QuestionDescription" data-ng-model="newQuestion.QuestionDescription" required />
</div>
Options<br/>
<div ng-repeat="i in [1,2,3,4]">
<label for="options[i].OptionDescription">Option {{i}}</label>
<input name="options[i].OptionDescription" type="text" data-ng-model="options[i].OptionDescription" required />
Is right answer:
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="true" />Yes
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="false" />No
</div>
<input type="submit" class="btn btn-primary" value="Add Question" data-ng-disabled="newQuestionForm.$invalid" />
Cancel
</form>
</div>
</div>
angular script as below
function newQuestionController($http, $scope, $window) {
$scope.newQuestion = {};
$scope.options = [{}];
$scope.save = function () {
$scope.newQuestion.Options.push(options);
alert($scope.newQuestion.QuestionDescription);
}
}
You have to initialize you $scope correct like this:
$scope.options = [{},{},{},{}];
and change the ng-repeat array to start from 0:
ng-repeat="i in [0,1,2,3]"
Here you can find a working example
I have researched online on how to create an additional form field. The method I am using comes from this site.
http://mrngoitall.net/blog/2013/10/02/adding-form-fields-dynamically-in-angularjs/
So basically what I am trying to do, is have data inputted in. But I don't know how many data points a certain person would like to put in. So I what to enable it so I can let them put additional points if they wish.
I have this in my tag:
<script>
function AngularCtrl($scope) {
function Controller($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.showAddChoice = function(choice) {
return choice.id === $scope.choices[$scope.choices.length-1].id;
};
$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
}
}
</script>
I then have this in my tag:
<div class="form-group" ng-controller="Controller" data-ng-repeat="choice in choices">
<form novalidate class="simple-form">
Title of Chart: <input type="text" ng-model="chart.title" /><br />
Series Name: <input type="text" ng-model="chart.series" /><br />
Series Data: <input type="text" ng-model="series.data" /><br>
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<button ng-show="showAddChoice(choice)" ng-
click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="Enter
a new data point">
<br>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
</div>
So as you can see, what I have is 4 form fields. I want choices to add a new form field. I have the button, but when I click the button to add another form field; it does not work. It stays the same.
I was wondering if what I have in my tags was off a bit.
Thank you for the help. Been struggling on this for hours.
To expand on my comment:
Directive html:
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<input type="text" ng-model="choice.name" name="" placeholder="Enter a new data point" />
<br>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
Primary content:
<div class="form-group" ng-controller="Controller">
<form novalidate class="simple-form">
Title of Chart: <input type="text" ng-model="chart.title" /><br />
Series Name: <input type="text" ng-model="chart.series" /><br />
Series Data: <input type="text" ng-model="series.data" /><br>
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
<div choice-editor ng-repeat="c in choices" choice="c"></div>
</form>
I'm very fuzzy on the best practices with directives. it seems like I mix too much into a single directive sometimes, i.e., i'm not sure if you want the ng-repeat and choice attributes on the same element... Maybe someone else can improve this answer. But that should give you some ideas of how to proceed, hopefully.