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

Question

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

如果 2015 年的数据与 2016 年相比没有变化，则用户需要快速将值复制到 2016 年输入字段中。模型是为这些表单动态创建的。您在此图像中看到的数据被分配到一个部分。输入模型是名称 '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。希望对你有帮助