I'm adding form elements dynamically using AngularJS as you can see below and it works very fine.
But sometimes, the user need to change the value of the placeholder and replace it with a value with his choice and I don't see if it's possible or not ?
Here is my HTML
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">Tr.</span>
<input id="tr-dpa" class="form-control" placeholder="Enter mobile number">
<button class="remove" ng-click="removeChoice()">-</button>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-1">
<button type="submit" class="add" ng-click="addNewChoice()">
+
</button>
</div>
</div>
</div>
And my script,
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
jsfiddle
You should have your choices array like this:
$scope.choices = [{
id: 'choice1',
placeholder: 'Enter Mobile Number'
}];
And, inside ng-repeat,
<input id="tr-dpa" class="form-control" placeholder="{{choice.placeholder}}">
Now, when you add new input, ask for a placeholder and push it along with id.
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({
'id': 'choice' + newItemNo,
placeholder: $scope.placeholder
});
$scope.placeholder = "sample placeholder"
};
And, $scope.placeholder would be in HTML,
<input type="text" value="sample placeholder" ng-model="placeholder">
<button type="submit" class="add" ng-click="addNewChoice()">
+
</button>
working example
Related
I have a form with three input fields and function to add new row:
<form ng-submit="">
<fieldset data-ng-repeat="person in persons">
<input type="text" ng-model="username">
<input type="text" ng-model="house">
<input type="text" ng-model="points">
</fieldset>
<button ng-click="addNewChoice()">Add fields</button><input type="submit" value="Submit">
</form>
And then I try to print data and its empty.
<div id="choicesDisplay">
{{ persons }}
</div>
js part:
$scope.persons = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.persons.length + 1;
$scope.persons.push({
'username': "",
'house': "",
'points': "",
});
};
$scope.removeChoice = function() {
var lastItem = $scope.persons.length-1;
$scope.persons.splice(lastItem);
};
How is it possible to submit form as an array? I cant use username[]. Thank you
Need to user <input type="text" ng-model="person.username">
html:
<form ng-submit="">
<fieldset data-ng-repeat="person in persons">
<input type="text" ng-model="person.username">
<input type="text" ng-model="person.house">
<input type="text" ng-model="person.points">
</fieldset>
<button ng-click="addNewChoice()">Add fields</button><input type="submit" value="Submit">
</form>
And then I try to print data and its empty.
<div id="choicesDisplay">
{{ persons }}
</div>
js part:
$scope.persons = [];
$scope.addNewChoice = function() {
var newItemNo = $scope.persons.length + 1;
$scope.persons.push({
'username': "",
'house': "",
'points': "",
});
};
$scope.removeChoice = function() {
var lastItem = $scope.persons.length-1;
$scope.persons.splice(lastItem);
};
Hi I have problem in adding form field and binding inside the ng-repeat
my form is like this
<div ng-repeat="(key, value) in categories">
<div class="col-sm-12"><b>{{ value.name }}</b></div>
<div class="col-sm-12" >
<div class="col-sm-3">
<label>Product</label>
<input
type="text"
class="form-control input-sm"
ng-model="product.name">
</div>
<div class="col-sm-1">
<label> </label>
<button type="button" ng-hide="$first" ng-click="removeProduct()">-</button>
</div>
</div>
<div class="col-sm-1">
<button type="button" ng-click="addNewProduct()">+</button>
</div>
</div>
json categories
[{"id":1,"name":"Furniture & Fixture"},
{"id":2,"name":"Miscellaneous Property"},
{"id":3,"name":"Office Equipment"},
{"id":4,"name":"Renovation"},
{"id":5,"name":"Vehicle"}]
Here I want to add dynamic form fields(products) for each category
my js is like this
$scope.addNewProduct = function(){
$scope.categories.push({});
}
$scope.removeProduct= function(index){
$scope.categories.splice(index,1);
}
i know its won't work i need to push data to each category.please help
Your function for adding new category should look like this:
$scope.addNewProduct = function(){
var newCategory=
{
id:$scope.categories.length+1,
name:$scope.product.name
}
$scope.categories.push(newCategory);
}
Following code will demo how to append 'item' to items list:
<script>
angular.module('AddItemToList', [])
.controller('FormController', ['$scope', function($scope) {
$scope.item = '';
$scope.items = [];
$scope.submit = function() {
if (typeof($scope.item) != "undefined" && $scope.item != "") {
// append item to items and reset item
$scope.items.push($scope.item);
$scope.item = '';
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="FormController">
Input item and Submit the form. This will get appended to the list:
<input type="text" ng-model="input" name="item" />
<input type="submit" id="submit" value="Submit" />
<pre>Final List={{items}}</pre>
</form>
I have length and breath,based o that i am calculating area(l*b),suppose i have many field with different length and breath,area is calculating properly but i need sum of the area column,so how to add sum of all the above field in one new text box??? i need sum of all num3(area).
my code is below ......
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myapp" ng-controller="MainCtrl">
<form data-ng-repeat="choice in choices">
Length:<input type="number" ng-model="num1" />
width: <input type="number" ng-model="num2" />
Area: <input id="area" type="number" ng-model="num3" placeholder="Area" value="{{ num1 * num2 }}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
</form>
<button ng-click="addNewChoice()">Add fields</button>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
</body>
</html>
I don't know an easy solution in your case.
You can't do it with value="{{ val + val2 }}" because it is only for displaying value not change model.
A possible solution :
<form data-ng-repeat="choice in choices">
Length:<input type="number" ng-model="choice.length" />
width: <input type="number" ng-model="choice.width" />
Area: <input id="area" type="number" placeholder="Area" value="{{ choice.length * choice.width }}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
</form>
<button ng-click="addNewChoice()">Add fields</button>
Result : {{ sum() }}
In your controller :
$scope.choices = [{id: 'choice1', length:0, width: 0}, {id: 'choice2', length:0, width: 0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
$scope.sum = function() {
var sum = 0;
angular.forEach($scope.choices, function(choice) {
sum += choice.length * choice.width;
});
return sum;
}
<form data-ng-repeat="item in choices">
Length:
<input type="number" ng-model="item.num1" /> width:
<input type="number" ng-model="item.num2" /> Area:
<input id="area" type="number" ng-model="num3" placeholder="Area" value="{{item.num1 * item.num2}}" />
<button ng-show="$last" ng-click="removeChoice()">-</button>
</form>
<span data-ng-bind="'Total Area:' + total()"></span>
</br>
<button ng-click="addNewChoice()">Add fields</button>
$scope.total = function() {
var total = 0;
angular.forEach($scope.choices, function(item) {
total += item.num1 * item.num2;
})
return total;
}
I am new to Angularjs. I learned some basic concepts and I started developing a form. According to my requirements, I have to give 4 textboxes and if user wants wants more he adds another 4 textboxes. Meanwhile, I am unable to track the entered details.
// create angular app
var validationApp = angular.module('validationApp','');
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length>1){
var newItemNo = $scope.choices.length-1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
You have had an error in your initialisation of your app. The empty array in angular.module('validationApp', []). This array is the list of modules myApp depends on:
var validationApp = angular.module('validationApp',[]);
Further information in the docs.
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({id:'choice' + newItemNo});
};
$scope.showChoiceLabel = function(choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length > 1) {
var newItemNo = $scope.choices.length - 1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
I have the following controller:
function userControl($scope,$http) {
$scope.users = [
{"id":"0","name":"User1","roles":[{}]},
{"id":"1","name":"User2","roles":[{}]},
]
$scope.addUser = function() {
var nextid = $scope.getNextId();
$scope.users.push({id:nextid,name:$scope.userName});
$scope.userName = '';
//$apply();
};
$scope.getNextId = function() {
var count = 0;
angular.forEach($scope.users, function(data) {
count = data.id;
});
var count2 = parseInt(count)+1;
return count2;
};
}
And the following HTML:
<h2>Users</h2>
<div ng-controller="userControl">
<div ng-repeat="user in users">
{{user.id}} : {{user.name}}
</div>
<form ng-submit="addUser()">
<input type="text" ng-model="userName" placeholder="User Name" />
<input type="submit" value="add">
</form>
</div>
<h2>Add role to user</h2>
<div ng-controller="userControl">
<div ng-repeat="user in users">
<u>{{user.id}} : {{user.name}}</u><br />
<div ng-repeat="role in user.roles">
{{role.name}}
</div>
<br />
</div>
<form ng-submit="addRoleToUser()">
<select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users"></select>
<input type="submit" value="add">
</form>
</div>
When I add a user in the addUser() function I can see the user is added since it's listed under the ng-repeat, however the user name does not appear in the select box.
This is because you use the same controller twice. This creates two separate scopes. When you add a user in one scope it doesn't get added in the second scope. The fix is simple, join the code in one scope:
<div ng-controller="userControl">
<h2>Users</h2>
<div>
<div ng-repeat="user in users">
{{user.id}} : {{user.name}}
</div>
<form ng-submit="addUser()">
<input type="text" ng-model="userName" placeholder="User Name" />
<input type="submit" value="add">
</form>
</div>
<h2>Add role to user</h2>
<div>
<div ng-repeat="user in users">
<u>{{user.id}} : {{user.name}}</u><br />
<div ng-repeat="role in user.roles">
{{role.name}}
</div>
<br />
</div>
<form ng-submit="addRoleToUser()">
<select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users"></select>
<input type="submit" value="add">
</form>
</div>
</div>
An alternative approach is to create a Service since services are singletons:
module.factory('Users',function(){
var users = [
{"id":"0","name":"User1","roles":[{}]},
{"id":"1","name":"User2","roles":[{}]},
];
return {
users:users,
add:function(user){
users.push(user);
}
}
});
function userControl($scope, Users) {
$scope.users = Users.users;
$scope.addUser = function() {
var nextid = $scope.getNextId();
Users.add({id:nextid,name:$scope.userName});
$scope.userName = '';
};
$scope.getNextId = function() {
var count = 0;
angular.forEach($scope.users, function(data) {
count = data.id;
});
var count2 = parseInt(count)+1;
return count2;
};
}
This will work with your original markup.