Question

现在我有了这个，在第一部分可以生成文本输入，表示不同数量的项目。

function itemBtnFunction() {
  var totalItem = document.getElementsByClassName("dymItem");
  totalItem = totalItem.length + 1;
  angular.element(document.querySelector('#divItem')).append("<p id='dymItem" + totalItem + "_wrapperIng'><input type='text' ng-model='itemDestination" + totalItem + "' class='dymItem' id='dymItem" + totalItem + "' placeholder='Item'><input type='button' value='-' onclick=remove_item('dymItem" + totalItem + "');></p>");
}

然后是删除生成的文本框的函数。目前，据我所知，这很好用，但是如果文本框未按相反的顺序删除（我可能需要解决的问题），ID号将重复出现。

function remove_item(id) {
  console.log(id + "_wrapperIng");
  document.getElementById(id + "_wrapperIng").outerHTML = "";
  id = null;
}

var app = angular.module("outputApp", []);

现在，应用程序本身几乎未受影响，因为我实际上仅在输入中使用ng-model绑定到文本框中的表达式，如我进一步展示的那样。我有一个自定义过滤器。

app.controller("appCtrl", function($scope) {});
app.filter('round', function() {
  return function(value, mult, dir) {
    dir = dir || 'nearest';
    mult = mult || 1;
    value = !value ? 0 : Number(value);
    if (dir === 'up') {
      return Math.ceil(value / mult) * mult;
    } else if (dir === 'down') {
      return Math.floor(value / mult) * mult;
    } else {
      return Math.round(value / mult) * mult;
    }
  };
});

在这里，我们有所有可以按预期工作的输入，并根据需要将输入放置到文本区域中。但是，即使将ng-model设置为静态内容，例如{{itemDestination}}，生成的文本框也将无法运行。检查该元素表明该事件从生成的文本框中丢失，但显然存在于常规txtItem中。我需要这些生成的框起作用，并创建{itemDestinationx}}以匹配每个生成的输入。理想情况下，以“”分隔，并在可能的情况下换行。我用ng-click尝试了几种方法，但似乎无法弄清楚。我猜想它与ng-repeat和数组有关，但是我找不到一个让我无所适从的例子。

<input name="txtName" ng-model="nameDestination" type="text">
<input name="txtDate" ng-model="durationDestination" type="date">
<div id="divItem">
  <input name="txtItem" ng-model="itemDestination" type="text">
  <div id="wrapperIng">
  </div>
  <button onclick="itemBtnFunction()">+</button>
</div>


<textarea id="appDestination">
  Name: "{{nameDestination}}", 
  Duration: "{{(durationDestination)}}",
  Item: "{{(durationDestination) % (60 * 60) / 60 | number | round:'':'down'}}H{{(durationDestination) % 60 | number: 0}}M", 
  Item: "{{ itemDestination }}"</textarea>

我也把它扔进了Plunker。 https://plnkr.co/edit/IttC4p?p=info

希望最终输出看起来像这样：

 Name: "Example", 
 Duration: "1H10M",
 Item: "1",
 Item: "2",
 Item: "3",

以此类推，尽可能接近原始格式，并在文本区域中进行提交。

如何生成文本框，然后将其值ng-model到AngularJS中的表达式？

0 个答案: