Add new inputs to angularjs
How can I add new multiple corner entries?
I have tried but cannot bind the ng-repeat with the input ng-model. I want to add ng-repeat from selectedItems to <div class="item-text-wrap">
, but it doesn't work if not initialized.
If I click the Add New Product button, a new Product Selection field appears and a new price entry field appears as shown.
here is the plunker .
here is my html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mycontroller">
<!-- <div class="item-text-wrap" ng-repeat="item in selectedItems"> -->
<div class="item-text-wrap">
<label class="item item-input item-select">
<span class="input-label">Product</span>
<select ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item)" class="col col-100"><option style="display:none" value="">select an item</option></select>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
</label>
</div>
{{selectedItems}}
</body>
</html>
here is my script.js
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.selectedItems = [];
$scope.items = [{'id':1,'name':'apple', 'price': 100},
{'id':2,'name':'orange', 'price':75},
{'id':3,'name':'lemon', 'price':50}]
$scope.toggleChange = function (item) {
$scope.selectedItems.splice($scope.selectedItems.indexOf(item), 1);
$scope.selectedItems.push(item);
};
});
source to share
I have spent many hours to finish adding new input fields as images. This allows multiple duplicate recordings. WORKING PERFECTLY as I wish. Love this a lot. :-)
It may not be the best solution, but it does the job I intended and hope to be useful to others.
And try to suggest a better approach.
- COPY items to selected items
angular.copy()
.
Push is just pointer, point to ordinary address. So it constrains integrity of selectedItems data
(accept the best suggestions and knowledge)
-
change the selected attribute to your selected item record of the selected items when you select options, for a future purpose.
-
add a new product or remove it, whatever you want.
-
select only the selected attribute.
here is a screenshot.
here is plunker
html is here.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mycontroller">
<div class="item-text-wrap" ng-repeat="items in selectedItems">
<button class="remove" ng-click="removeChoice(items)">-</button>
<label class="item item-input item-select">
<span class="input-label">Product</span>
<select ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item, items)"><option style="display:none" value="">select an item</option></select>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
</label>
</div>
<button ng-click="addItems()">Add new Product</button> <br>
{{selectedItems}} <br><br>
<button ng-click="displaySelectedOnly()" ng-disabled="bool == false">futurepurpose</button> <br>
{{selectedItemsOnly}}
</body>
</html>
here js
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.selectedItems = [];
$scope.items = [{'id':1,'name':'apple', 'price': 100},
{'id':2,'name':'orange', 'price':75},
{'id':3,'name':'lemon', 'price':50}]
$scope.selectedItemsOnly = [];
$scope.bool = false;
$scope.toggleChange = function (item, items) {
angular.forEach(items, function(item){
if(!angular.isUndefined(item.selected) && item.selected === true){
item.selected = false;
}
});
item.selected = true;
$scope.bool = true;
};
$scope.addItems = function (items){
$scope.selectedItems.push(angular.copy($scope.items));
}
$scope.removeChoice = function (items){
$scope.selectedItems.splice($scope.selectedItems.indexOf(items), 1)
if($scope.selectedItem.length === 0) $scope.bool = false;
}
$scope.displaySelectedOnly = function(){
angular.forEach($scope.selectedItems, function(items){
angular.forEach(items, function(item){
if(!angular.isUndefined(item.selected) && item.selected === true){
$scope.selectedItemsOnly.push(item);
}
});
});
}
$scope.addItems($scope.items);
});
source to share
To add items to an array seletedItems
from an array items
and avoid duplicates, just use indexof
to find if an item in your selectedItems array already exists, and if found, remove it, if not just add it !!!
As per your updated question, you can do this with the directive,
Here I used one directive
and ngRepeat
to create Dom over and over again with directive on add click new product function
by increasing the number of arrays !!!
Here is an updated plunker with your code !!!!!
http://embed.plnkr.co/OpYjLEpX8kScqfIMN175/preview
Hope it helps
source to share
check this plunker: since I don't know that you have full information about an object, you can add multiple conditions to validate items.
http://plnkr.co/edit/Arw9Jibeu0kmLzgoX8ou?p=preview
<button ng-click="addProduct(item)">add new product</button>
<br />
{{selectedItems}}
<br />
<b>Added items:</b>
{{addedItems}}
let me know if you need any changes to it.
source to share