Don't save by $index

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" class="container">
  <div ng-controller="Controller as ctrl">
    <input type="text" ng-model="ctrl.filter_items" class="form-control" placeholder="Filter items...">
    <button class="btn btn-default btn-sm" ng-click="ctrl.reset()" ng-if="ctrl.item_edited">Reset List</button>
    <table class="table table-striped">
      <tr ng-repeat="item in ctrl.items | orderBy:'name' | filter:ctrl.filter_items">
        <td>{{item.name}}</td>
        <td>
          <button ng-click="ctrl.editItem($index,item)" class="pull-right btn btn-default btn-xs">Edit</button>
        </td>
      </tr>
    </table>
    <hr>
    <div ng-if="ctrl.edit_item">
      <h4>
      Edit Item
      </h4>
      <input type="text" ng-model="ctrl.edit_item.name" class="form-control">
      <button ng-click="ctrl.saveItemByIdx()" class="btn btn-danger">Save By Index (BAD!!)</button>
      <button ng-click="ctrl.saveItem()" class="btn btn-success">Save By Object (GOOD!!!)</button>
      <button ng-click="ctrl.clear()" class="btn btn-link">Cancel</button>
    </div>
  </div>
</div>

CSS

body {
  padding-top: 20px;
}

input {
  margin-bottom: 20px;
}

.table {
  margin-top: 20px;
}

JavaScript

angular
  .module('app', [])
  .controller('Controller', Controller);

function Controller() {
  var vm = this;

  vm.item_edited = false;
  vm.edit_item = null;
  vm.items = getItems();
  vm.editItem = editItem;
  vm.saveItem = saveItem;
  vm.saveItemByIdx = saveItemByIndex;
  vm.clear = clear;
  vm.reset = reset;

  function getItems() {
    return [{
      name: 'Banana'
    }, {
      name: 'Apple'
    }, {
      name: 'Orange'
    }, {
      name: 'Cantaloupe'
    }, {
      name: 'Strawberries'
    }];
  }

  function editItem(list_index, item) {
    var array_index = vm.items.indexOf(item);
    vm.item_edited = true;
    vm.list_index = list_index;
    vm.edit_item = {
      name: item.name,
      list_index: list_index,
      array_index: array_index
    };
  }

  function saveItemByIndex() {
    var item_index = vm.edit_item.list_index;
    vm.item_edited = true;
    vm.items[item_index].name = vm.edit_item.name;
    clear();
  }

  function saveItem() {
    var item_index = vm.edit_item.array_index;
    vm.items[item_index] = vm.edit_item;
    clear();
  }

  function clear() {
    vm.edit_item = null;
    vm.filter_items = '';
  }

  function reset() {
    vm.items = getItems();
  }
}