如何通过输入表单将对象数组添加到html列表？

Question

I want to create dynamic lists in my page. 我想在我的页面中创建动态列表。 Where user can add item to list from form. 用户可以从表单中添加项目到列表。 Something like this: 像这样的东西：

w3school example w3school例子

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. 谢谢你的所有答案。

Answer 1

Have a look at ngModelOptions to control how the model is updated: https://docs.angularjs.org/api/ng/directive/ngModelOptions 查看ngModelOptions以控制模型的更新方式： 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. 只是搞乱JavaScript事件将触发更新。

Answer 2

使用angular.copy（）创建一个副本，然后将该复制的对象推送到数组。

如何通过输入表单将对象数组添加到html列表？

问题描述

2 个解决方案

解决方案1
0 2016-08-19 16:22:14

解决方案2
0 已采纳 2016-08-19 16:27:56

如何通过输入表单将对象数组添加到html列表？

问题描述

2 个解决方案

解决方案1 0 2016-08-19 16:22:14

解决方案2 0 已采纳 2016-08-19 16:27:56

解决方案1
0 2016-08-19 16:22:14

解决方案2
0 已采纳 2016-08-19 16:27:56