AngularJS ng-repeat nested form w/ socket.io

Question

I am building a real time application with socket.io. I've ran across a problem using ng-repeat with a nested form inside an ng-repeat tag. Here is the jist of the code:

<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-->

The schema of bigObject is as follows:

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
});

Basically bigObject can have N columns, with N rows inside of it. This is where I'm using ng-repeat to first iterate over the columns, which contains a form with an input to add rows. Then within the column I then iterate over the rows.

Okay. Here's the my problem. Since I'm using socket.io to sync real time bigObject updates between clients when the bigObject changes it re renders ALL of the ng-repeat's...and in dosing so blows away the input . As in, if one client is typing in an input, and another client causes an update, the user receiving the update page re renders and whatever they are type gets blown away.

My thoughts so far:

• Take the input box out of all the ng-repeat tags, so its unaffected from updates. This adds complexity however, again I could have N columns...means N input boxes. It's nice having them correlate.
• Ditch the idea of being completely dynamic in terms of N columns since in reality the UI with be fixed to only allow 2-3 columns. But ya, that seems lame.
• Find some fancy angular/css tricks to hack around this....which haven't been super fruitful

Am I approaching this all wrong? I usually favor the simplest option..the first option adds code complexity, and the second adds code duplication but more simple.

Thanks.

Answer 1

You could change it like this:

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

Replace ng-model="rowValue" to something like ng-model="temp[columnIndex].rowValue" , where temp is another object in your model, unrelated to BigObject. This way your temporary (not yet saved data, and available to only the current client) is in a different place than the one available to all clients, and the update of BigObject shouldn't interfere with the text in your input.

Edit: Not sure if I was clear enough(or if it's the recommended way to do it), but temp should be on the model, not only on the scope(since the scope gets replaced and it loses the content)