Angularjs When to use track-by over select-as in ng-options directive

Question

I would like to know in which situations is recommended to use track by over select as in ng-options directive?

Here we have the two options:

<select ng-options="item.id as item.name for item in items" ng-model="selectedItemSA">

<select ng-options="item.name for item in items track by item.id" ng-model="selectedItemTB">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-init="items = [{id: 1, name: 'item1'}, {id: 2, name: 'item2'}]">
  
    <div>
      <h2>Using select as</h2>
      <select ng-options="item.id as item.name for item in items" ng-model="selectedItemSA">
      </select>
      <button ng-click="selectedItemSA = 2;">Select item 2</button>
    </div>
    
    <div>
      <h2>Using track by</h2>      
      <select ng-options="item.name for item in items track by item.id" ng-model="selectedItemTB">
      </select>
      <button ng-click="selectedItemTB = {id: 2, name: 'item2'};">Select item 2</button>
    </div>  
        
  </div>
</div>

We can see the html result is the same:

  <div>
    <h2>Using select as</h2>
    <select ng-options="item.id as item.name for item in items" ng-model="selectedItemSA" class="ng-pristine ng-untouched ng-valid ng-empty">
      <option value="?" selected="selected"></option>
      <option label="item1" value="number:1">item1</option>
      <option label="item2" value="number:2">item2</option>
    </select>
    <button ng-click="selectedItemSA = 2;">Select item 2</button>
  </div>

  <div>
    <h2>Using track by</h2>
    <select ng-options="item.name for item in items track by item.id" ng-model="selectedItemTB" class="ng-pristine ng-untouched ng-valid ng-empty">
      <option value="?" selected="selected"></option>
      <option label="item1" value="1">item1</option>
      <option label="item2" value="2">item2</option>
    </select>
    <button ng-click="selectedItemTB = {id: 2, name: 'item2'};">Select item 2</button>
  </div>

To select an item with select as we must do:

selectedItemSA = 2;

To select an item with track by we must do:

selectedItemTB = {id: 2, name: 'item2'};

Most of the times I will have access just to the item id, or just it will be more easy to use the item id than the whole object. So I will always prefer to use select as over track by.

Do you know a situation where track by would be the preferable option?

Angularjs When to use track-by over select-as in ng-options directive

0 Answers0