AngularJS ng-repeat 嵌套表单 w/socket.io

Question

我正在使用 socket.io 构建一个实时应用程序。我在 ng-repeat 标记内使用带有嵌套形式的 ng-repeat 时遇到了问题。这是代码的jist：

<div class="row" id="thingArea">
        <div class="thing text-center col-sm-{{12/bigObject.columns.length}} col-xs-{{12/bigObject.columns.length}}" ng-repeat="column in bigObject.columns" data-columnindex="{{$index}}" id="column{{$index}}">
          <h3 class="title">
            <span class="text header-text"><font size="7" ng-bind-html="column.title"></font> </span>
          </h3>
          <form ng-submit="addRow($index, rowValue)" class="thing-form" >
            <div class="form-group">
              <input type="text" class="form-control" ng-model="rowValue" placeholder="{{column.placeholder}}">
              <br/>
              <br/>
              <div class="thing-column" as-sortable="thingSortOptions" ng-model="column.rows">
                <div class="alert alert-{{column.color}} alert-dismissible" role="alert" ng-model='row' ng-repeat="row in column.rows" as-sortable-item>
                  <div as-sortable-item-handle>
                    <button type="button" class="close" ng-click="deleteRow(column, row)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    {{row.value}}
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div><!--//row-->

bigObject的架构如下：

var RowSchema = new Schema({
  value: String
});

var ColumnSchema = new Schema({
  title:  String,
  placeholder: String,
  color: String,
  selected: String,
  rows: [RowSchema]
});

var BigObjectSchema = new Schema({
  _id: {
    type: String,
    unique: true,
    'default': shortid.generate
  },
  name: String,
  startTime: Date,
  endTime: Date,
  columns: [ColumnSchema],
  info: String,
  active: Boolean
});

基本上 bigObject 可以有 N 列，其中有 N 行。这是我使用 ng-repeat 第一次迭代列的地方，其中包含一个带有输入以添加行的表单。然后在列中，我然后遍历行。

好的。这是我的问题。由于我使用 socket.io 在 bigObject 更改时在客户端之间同步实时 bigObject 更新，因此它会重新呈现所有 ng-repeat 的......并且在剂量中吹走输入。例如，如果一个客户端正在输入输入，而另一个客户端导致更新，则接收更新页面的用户会重新呈现，并且无论他们输入的是什么类型的内容都会被吹走。

到目前为止我的想法：

• 从所有 ng-repeat 标签中取出输入框，使其不受更新的影响。然而，这增加了复杂性，我也可以有 N 列......意味着 N 个输入框。让它们相互关联真是太好了。
• 放弃在 N 列方面完全动态的想法，因为实际上 UI 被固定为仅允许 2-3 列。但是，你，这似乎很蹩脚。
• 找到一些花哨的 angular/css 技巧来解决这个问题....这并不是很有成效

我处理这一切都错了吗？我通常倾向于最简单的选项。第一个选项增加了代码复杂性，第二个增加了代码重复但更简单。

谢谢。

Answer 1

你可以这样改：

<div....ng-repeat="column in bigObject.columns" ng-init="columnIndex = $index"....>

将 ng-model="rowValue" 替换为 ng-model="temp[columnIndex].rowValue" 之类的东西，其中 temp 是模型中的另一个对象，与 BigObject 无关。这样，您的临时（尚未保存的数据，并且仅对当前客户端可用）与所有客户端可用的位置不同，并且 BigObject 的更新不应干扰输入中的文本。

编辑： 不确定我是否足够清楚（或者它是否是推荐的方法），但 temp 应该在模型上，而不仅仅是在范围上（因为范围被替换并且它丢失了内容）