在 angularjs 中添加新的输入答案

【问题标题】：add new inputs in angularjs在 angularjs 中添加新的输入
【发布时间】：2015-05-13 05:34:48
【问题描述】：

如何使用 angularjs 添加新的多个输入？

我尝试过但无法将 ng-repeat 与输入 ng-model 绑定。我希望将 selectedItems 的 ng-repeat 添加到<div class="item-text-wrap">，但除非初始化它，否则它不起作用。

如果我点击添加新产品按钮，新产品选择字段和新价格输入字段将如图所示。

这里是plunker。

这是我的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>

这是我的 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);
  };

});

【问题讨论】：

正确的 Plunker 链接
你能再解释一下，你想达到什么目的
我希望将项目添加到 selectedItems，意味着多个项目。但我无法将 selectedItems 与项目绑定。请检查 plunker。我更新了链接。
这意味着您希望基于 select 标记的 selected items 数组中有多个项目。我对吗？如果是这样，在调用toggle change 函数时注释掉splice 函数行
我不能Alhuck，用户需要显示下一个输入字段。这只是演示。 item 对象中还有一些属性，例如输入日期，可能会有所不同。

标签： javascript angularjs

【解决方案1】：

看看这个 plunker：因为我不知道你完整的对象详细信息，你仍然可以添加一些条件来验证项目。

http://plnkr.co/edit/Arw9Jibeu0kmLzgoX8ou?p=preview

  <button ng-click="addProduct(item)">add new product</button>
  <br />
    {{selectedItems}}
  <br />
  <b>Added items:</b>
  {{addedItems}}

如果需要任何更改，请告诉我。

【讨论】：

谢谢你的帮助，伙计。但我需要额外项目的输入字段。请看有问题的图片。我刚刚添加了。

【解决方案2】：

为了将项目从items 数组添加到您的seletedItems 数组并避免重复，只需使用indexof 来查找您的 selectedItems 数组中是否已经存在项目，如果发现删除它，如果不只是添加它！！！

根据您更新的问题，您可以使用指令来执行此操作，

在这里，我使用directive 和ngRepeat 一次又一次地使用指令创建Dom，同时单击添加new product function 通过增加数组计数！！！

这是您的代码更新后的 plunker！！！！

http://embed.plnkr.co/OpYjLEpX8kScqfIMN175/preview

希望对你有帮助

【讨论】：

谢谢你的帮助，伙计。但我需要其他项目的输入字段。请看有问题的图片。我刚刚添加了。
您需要像这样添加多少个输入字段和选择字段，select 标签的选项有哪些
一条记录需要添加3个输入字段。像库存项目输入。输入项目、每个包裹的数量和到达日期。记录数将是动态的。
谢谢，这很有帮助，但不能接受重复输入。无论如何，感谢您的帮助。 :-) 我现在明白了。

【解决方案3】：

我花了很多时间来完成将新的输入字段添加为图片。它启用多个重复条目。 工作完美如我所愿。非常喜欢。 :-)

它可能不是最好的解决方案，但它完成了任务，我打算并希望对其他人有用。

请提出任何更好的方法。

COPY 项到 angular.copy() 的 selectedItems。

Push is just pointer, point to ordinary address. So it constrains integrity of selectedItems data

（接受更好的建议和知识）

在选择选项时，将 selected 属性更改为 selectedItems 记录的 selecteditem，以备将来使用。
添加或删除新产品，随心所欲。
仅选择选定的属性。

这里是截图。

这里是plunker

这里是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="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>

这里是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);

});

【讨论】：