AngularJS ng-repeat 嵌套形式 w/ socket.io

Question

我正在使用 socket.io 构建一个实时应用程序。我运行遇到了一个问题，使用 ng-repeat 和 ng-repeat 标签内的嵌套表单。这是代码的要点：

<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的schema如下：

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 应该在模型上，而不仅仅是在范围上（因为范围被替换并且它丢失了内容）

AngularJS ng-repeat 嵌套形式 w/ socket.io

AngularJS ng-repeat nested form w/ socket.io

javascript

forms

socket.io

angularjs

ng-repeat