I have following html content
<div id="abc"></div>
<input type="button" name="xyz" value="Add Input">
I want that when we click on above "Add Input" button then following input tag should be appended with autoincrement id in "abc" div content.
<input id="mx1" value="">
When first time we click then it should append <input id="mx1" value=""> , when we click next time, then it should append <input id="mx2" value="">, like this.
How to do this in Angular ? Will it easy ?
You can do it with ng-repeat
<div id="abc">
<input type="text" id="{{input.id}}" ng-repeat="input in inputs">
</div>
<input type="button" name="xyz" value="Add Input" ng-click="addInput()">
In your controller
$scope.inputs = [];
$scope.addInput = function() {
id = $scope.inputs.length + 1
$scope.inputs.push({
id: id,
value: 'value'
})
}
https://jsfiddle.net/ebinmanuval/fu7yL83m/
in your html:
<div ng-repeat="data in inputData">
<input id="mx{{$index}}" ng-model="data.value">
</div>
<input type="button" name="xyz" ng-click="addButton()" value="Add Input">
In your controller:
$scope.inputData = []; //declare an empty array
$scope.addButton = function(){
$scope.inputData.push({value: ''}); //push new object to this array
}
Related
Here when i click Add Product Button it creates a text field. But I want to create create different name for each text box in ng-model="column.product_cgst".
like column.product_cgst-1, column.product_cgst-2.
<form>
<div ng-repeat="column in columns" style="margin-bottom: 10px;">
<div class="form-group">
<input type="text" name="product_name" ng-model="column.product_name" required placeholder="Product Name" class="form-control"
id="userName">
</div>
<div class="form-group">
<select name="units" ng-model="column.units" class="form-control">
<option value="">Select Units</option>
<option ng-repeat="units in allunits" value="{{units.unit_id}}">
{{units.unit_name}}
</option>
</select>
</div>
<div class="form-group">
<input id="cgst" type="text" ng-model="column.product_cgst" placeholder="Enter CGST" required class="form-control">
</div>
<div class="form-group">
<input id="sgst" type="text" ng-model="column.product_sgst" placeholder="Enter SGST" required class="form-control">
</div>
<div class="form-group">
<input id="igst" type="text" ng-model="column.product_igst" placeholder="Enter IGST" required class="form-control">
</div>
<button class="remove btn-sm btn-danger" ng-click="removeColumn($index)">x</button>
</div>
<div class="form-group text-right m-b-0">
<button class="btn btn-primary waves-effect waves-light" type="submit">
Submit
</button>
<button class="addfields btn btn-info waves-effect waves-light" ng-click="addProduct()">Add Product</button>
</div>
</form>
Controller:
$scope.columns = [];
$scope.addProduct = function () {
var newItemNo = $scope.columns.length + 1;
$scope.columns.push({ 'colId': 'col' + newItemNo });
};
$scope.removeColumn = function (index) {
$scope.columns.splice(index, 1);
if ($scope.columns.length() === 0 || $scope.columns.length() == null) {
alert('no rec');
$scope.columns.push = [{ "colId": "col1" }];
}
};
You can use $index in the HTML to increment your ng-model dynamically instead of doing in controller.
Using $index in the interpolation with ngModel will not work. Try something like below
column.product_cgst[$index]
I get the Solutions here,only change in my angularjs controllers.
//Add Dynamic Column
$scope.columns = [{id: 'firstField'}];
$scope.addProduct = function(){
var newItemNo = $scope.columns.length+1;
$scope.columns.push({'id':'field'+newItemNo});
}
//Remove Dynamic Column
$scope.removeColumn = function() {
var itemLast = $scope.columns.length-1;
$scope.columns.splice(itemLast);
};
//Insert Data in Database:-
$scope.productAdd = function(){
$http.post('product/insert_product', $scope.columns)
.success(function(data){
console.log(data);
});
}
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>
This is my Fiddle.
http://jsfiddle.net/0c5p38dt/1/
In the above fiddle use ng-model in textfield and add save button
<input type="text" ng-model="eachItem.value"/>
<input type="button" value="save" ng-click="save()"/>
and i write code in js file :-
$scope.save=function(){
console.log($scope.data);
};
In the above code first i click add button when i enter data in first textfield(name) that will also effect on second textfield(name). I want to save the data . So how to differentiate these textboxes.
you should use a 'name' attribute in your input fields with angular
$index
on ng-repeat.
in your Fiddle:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="eachItem in data">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
<label>{{eachItem.label}}</label>
<input type="text" name="eachItem.label[$index]" />
</div>
</div>
</div>
The result would be like:
<input type="text" name="email[1]">
<input type="text" name="email[2]">
<input type="text" name="email[3]">
<input type="text" name="name[1]">
<input type="text" name="name[2]">
I'm not completely sure what you want, but I don't think you want the <input> in an ng-repeat, maybe what you want is in your .html:
<div ng-app>
<div ng-controller="Ctrl">
<label>Name</label>
<input type="text"ng-model="item.name"/>
<label>Email</label>
<input type="text"ng-model="item.email"/>
<input type="button" value="add" ng-click="addFields(item)"/>
<div ng-repeat="item in data">
<div ng-bind="item.name"></div>
<div ng-bind="item.email"></div>
</div>
</div>
</div>
and in your .js:
function Ctrl($scope) {
$scope.data=[];
$scope.addFields = function (item) {
$scope.data.push(item);
};
}
This will give you the inputs once and then keep track (and display) the data from the inputs
I have a form where the user can add fields dynamically. It is my html:
<body ng-controller="FruitController">
<button type="button" ng-click="addFruit()">Add fruit</button>
<form name="list">
<div id="dynamicList" ng-repeat="fruit in fruits">
<input type="text" name="fruitName" ng-model="fruit.name" ng-minlength="3"/>
</div>
</form>
</body>
And it is my controller:
app.controller('FruitController', [function(){
$scope.fruits = [
{name: 'Apple', color: 'red'}
];
$scope.addFruit = function()
{
$scope.fruits.push({name: '', color: ''});
};
}]);
So, when a field is invalid i add a css class with the next directive:
ng-class="{'uk-form-danger': (list.fruitName.$invalid && !list.fruitName.$pristine)}"
The problem is that, when 1 field fails, another fields too.
Any ideas ?
Form inside ng-repeat won't work directly. You need to create a a separate form for inner elements that form will be child of outer form list
<form name="list">
<div id="dynamicList" ng-repeat="fruit in fruits">
<form name="innerForm">
<input type="text" name="fruitName" ng-model="fruit.name" ng-minlength="3"
ng-class="{'uk-form-danger': (innerForm.fruitName.$invalid && !fruit.name.$pristine)}"/>
</form>
</div>
</form>
there is forms inside ng-repeat. When i submit any form then last form is submitted every time that's wrong.
only selected form need to submit.
My code is
<ul rn-carousel rn-carousel-indicator style="list-style: none">
<li ng-repeat="story in stories">
<form ng-submit="commentsSubmit($index)" method="post">
<input type="hidden" ng-init="comment.itemID = story.news_id" ng-model="comment.itemID">
<input type="hidden" ng-init="comment.owner_id = 1" ng-model="comment.owner_id">
<input type="hidden" ng-init="comment.type = 'L'" ng-model="comment.type">
<input type="hidden" ng-init="comment.from = 'app'" ng-model="comment.from">
<input type="hidden" ng-init="comment.user_id = user_id" ng-model="comment.user_id">
<input type="hidden" ng-init="comment.redirect = 'story'" ng-model="comment.redirect">
<textarea ng-model="comment.content" class="textarea" rows="3" placeholder="Your Comment">{{ content }}</textarea>
<button class="button--cta">Submit</button>
</form>
<li>
</ul>
How i achieve this?
There is already a similar question discussed about this,
FYI form submission on ng-repeat
Pass the object instead of id, in your controller,
$scope.commentsSubmit = function(story)
Do submit like this, <form ng-submit="submit(story)">
$scope.commentsSubmit = function(story){
var comments = story;
$http({ data: $.param($scope.comment)
}).success(function(data) {
MyCache.put('comments-'+$scope.comment.itemID, data.reviews);
})
};