ng-options track by 思考

问题描述

昨天给陈杰讲解select时也是研究了一下ng-options中的track by。

之前一直不明白为什么不加track by就选不中。

分析

以下代码均在plunker中，在线代码演示 - plunker

track by，根据...追踪，就是以什么去标识一个对象。

不选中

  
    
    
  

  
    

      

        Make a choice:
        
      
      

      option = {{data.selectedOption}}
    
  

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  $scope.data = {
    availableOptions: [
      { id: '1', name: 'Option A', age: 18 },
      { id: '2', name: 'Option B', age: 19 },
      { id: '3', name: 'Option C', age: 20 }
    ],
    selectedOption: { id: '1', name: 'Option B', age: 20 }
  };
});

默认不加track by时是选不中的。

选中原理

三个选项。

{ id: '1', name: 'Option A', age: 18 },
{ id: '2', name: 'Option B', age: 19 },
{ id: '3', name: 'Option C', age: 20 }

但是我们设置的选中对象与三者都不一致。

selectedOption: { id: '1', name: 'Option B', age: 20 }

track by id

选中第一项。

track by name

选中第二项。

track by age

选中第三项。

总结

所以track by就是ng-options的下拉框中判定选中的一种标识，就像java重写object的equals方法一样，我可以根据不同的属性来判断两者是否是一个对象。