ng-options track by 思考

时间 2019-12-06

标签 options track 思考栏目兴趣爱好繁體版

原文原文链接

问题描述

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

以前一直不明白为何不加track by就选不中。css

分析

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

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

不选中

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <form name="myForm">
        <label for="mySelect">Make a choice:</label>
        <select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions" ng-model="data.selectedOption"></select>
      </form>
      <hr>
      <tt>option = {{data.selectedOption}}</tt>
    </div>
  </body>
</html>

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时是选不中的。app

选中原理

三个选项。spa

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

可是咱们设置的选中对象与三者都不一致。code

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

track by idorm

选中第一项。htm

track by name对象

选中第二项。

track by age

选中第三项。

总结

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