How can I add array of object to html list by input form?
Question
I want to create dynamic lists in my page. Where user can add item to list from form. Something like this:
but I want add more inputs and send one object to angular function. Something like this:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = [{food: "Milk", price: "1$"}, {food : "Bread", price: "1$"}, {food : "Cheese", price: "1$"}];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My Shopping List</h3>
</header>
<ul class="w3-ul">
<li ng-repeat="x in products" class="w3-padding-16">{{x.food}} : {{x.price}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s10">
<input placeholder="Add shopping items here" ng-model="addMe.food" class="w3-input w3-border w3-padding">
<input placeholder="Add shopping items here" ng-model="addMe.price" class="w3-input w3-border w3-padding">
</div>
<div class="w3-col s2">
<button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
</div>
</body>
</html>
but if I added new item to my list and then I start change value in textbox so too change value in my list. There is something like pointer. If I send array of string then dont do it but I dont want connected to one string. Now I have connected to one string but I dont want it.
Thanks for all answers.
2 answers
solution1
0 2016-08-19 16:22:14
Have a look at ngModelOptions to control how the model is updated: https://docs.angularjs.org/api/ng/directive/ngModelOptions
try this:
<input placeholder="Add shopping items here"
ng-model="addMe.price"
ng-model-options="{ updateOn: 'blur' }"
class="w3-input w3-border w3-padding">
Just mess around with what JavaScript event will trigger the update.
solution2
0 ACCPTED 2016-08-19 16:27:56
使用angular.copy（）创建一个副本，然后将该复制的对象推送到数组。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.