Question

我正在创建一个表单，您可以添加多个映射到数组的列。

记录模型的示例如下所示

record = {'template_name' => 'name', 'detail_section_header' => ['Name', 'Date', 'Assigned To'}

目前，我正在这样做

HTML：

<form>
  <div class="x-label">Name</div>
  <input type="text" placeholder="Name" ng-model="record.template_name" autofocus required />
  <table>
    <tr>
      <thead ng-repeat="i in record.detail_section_header track by $index">
        <input type="text" detail-section-header-input index="{{$index}}" />
      </thead>
    </tr>

      ... <buttons to add/remove columns which increments and decrements the size of detail_section_header> ...
  </table>
</form>

coffeescript中的

指令：

angular.module('xtiri').directive 'detailSectionHeaderInput', ->
  link: ($scope, el, attrs) ->
  el.on('keyup', ->
    $scope.record.detail_section_header[attrs.index] = el.val()
)

当前正在发生的事情是，在绑定模型（记录）的键入期间，数组（detail_section_header）不会填充，直到我更改绑定模型中的另一个字段（如template_name），然后更新。我猜这与消化时有关？有关如何在键入后立即填充该数组的任何建议？

Answer 1

Angular已经有ngModel用于绑定到输入元素，因此您不需要自定义指令。

以下是如何使用ngModel处理双向绑定的方法：

  <thead ng-repeat="i in record.detail_section_header track by $index">
    <input type="text" ng-model="record.detail_section_header[$index]" />
  </thead>

注意：不要尝试绑定到ngRepeat的i变量。

例如，这不符合您的期望：

<input type="text" ng-model="i" />

这就像这样做：
（仅用于演示目的的代码，Angular内部结构非常不同）

var detail_section_header = ['Name', 'Date', 'Assigned To'];
var $index = 0;

// This is like using `ng-model="record.detail_section_header[$index]"`
detail_section_header[$index] = 'new value';

// **Correct: **
// We get the expected result,
// `detail_section_header[$index]` has the new value


// This is the equivalent of trying `ng-model="i"`
var i = detail_section_header[$index];
i = newValue;

// **Incorrect:**
// `detail_section_header[$index]` is unchanged

Angular记录未通过指令

1 个答案: