如何在 ng-repeat 中绑定来自动态命名输入的数据

Question

我的目标是能够将数据从 table 行复制到另一个 table 行。

如果 2015 年的数据与 2016 年相比没有变化，用户需要一种将值复制到 2016 年输入字段的快速方法。模型是为这些表单动态创建的。您在此图像中看到的数据已分配给一个部分。输入模型是 name 'price_min + section_id', price_max + section_id' 等... 历史模型没有将 section_id 添加到模型名称的末尾。所以需要有一个我需要帮助的映射函数。我需要将历史值映射到当前模型约定并使用这些值更新视图。

目前我有一个点击功能，可以引入匹配的部分历史记录。这是它的屏幕截图。

在同一个函数中，我有 2016 对象数组和当前模型命名约定。

我需要将历史值复制到 inputArray 中。我是怎么做到的，我不知道？我可以完全控制它的工作原理。在plunker中你会看到我是怎么做到的。如果我需要改变其他东西来完成这项工作，那没关系。 javascript, jquery, lodash, linq.js 目前正在项目中使用。

正在工作的笨蛋 working plunker

$scope.copyHistoryData = function (section) {
    var selected = Enumerable.From(sectionsHistory).Where("x => x.section_id == '" + section.section_id + "'").ToArray();
    selected = selected[0];
    var inputArry = section.sectionInputs;
};

Answer 1

我不确定你为什么使用如此复杂的数据结构，但这是我的看法

$scope.copyHistoryData = function (section, input) {
        var historyId=input.model.split('-')[0];
        var historyVal=section.sectionHistory[section.sectionHistory.length-1][historyId];
        $scope.model[input.model]=historyVal;
    };

填写所有字段：

$scope.copyHistoryData = function (section) {
      angular.forEach(section.sectionHistory[section.sectionHistory.length-1], function (historyVal, historyId) {
        var inputModel=historyId+"-"+section.section_id;
        $scope.model[inputModel]=historyVal;
      });
    };

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

Answer 2

我同意@ssh。数据结构一团糟。我认为这是对它应该是什么样子的更好表示。可能不是最好的，但您不必遍历数据然后像那样显示它。

http://plnkr.co/C9DWV1dSvkk8lcYdm0An?p=preview

<div class="hpanel" ng-repeat="section in sections">
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <ul class="list-inline">
            <li>
              <h5>
                <b>SecID</b>
              </h5>
              <span>{{section.section_id}}</span>
            </li>
            <li>
              <h5>
                <b>Section Name</b>
              </h5>
              <span>{{section.section_name}}</span>
            </li>
          </ul>
          <hr/>
          <button ng-click="section.new_section_history = section.section_history">copy row</button>
          <table>
            <tr>
              <td ng-repeat="label in labelIndex">
                {{label.label}}
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                {{section.section_history[label.index]}}
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                <input ng-model="section.new_section_history[label.index]"/>
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                <button ng-click="section.new_section_history[label.index] = section.section_history[label.index]">copy</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

Answer 3

我检查了你的代码，我同意@Steven Kaspar 的观点，每一行的锚点都没有多大意义。我已经使用 jQuery 解决了它（我知道它不遵循您使用 Angular 的方案，但这是另一种解决方案）。我添加了一个新的 <tr> 以在其中添加一个 button。

看看这个：

<tr>
    <td colspan="10"><button class="copyRow">Copy complete row</button></td>
</tr>

并且在 app.js 中：

$(document).on("click", ".copyRow", function(){
    var $btn = $(this),
    $tbody = $btn.parent().parent().parent(),
    $trs = $tbody.find("tr");

    $.each($trs.eq(0).find("td"), function(index, td){
     $trs.eq(1).find("td").eq(index).find("input").val(parseFloat($(td).text().replace("$", "")));
    });
})

这是更新后的 plunker。希望对你有帮助

如何在 ng-repeat 中绑定来自动态命名输入的数据

how to bind data from dynamically named inputs inside a ng-repeat

javascript

jquery

angularjs

linq.js

lodash