ng-options track by 思考

2019年9月15日 287次阅读 来源: 张喜硕

问题描述

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

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

分析

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

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

不选中

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

《ng-options 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

选中第一项。

《ng-options track by 思考》

track by name

选中第二项。

《ng-options track by 思考》

track by age

选中第三项。

《ng-options track by 思考》

总结

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

    原文作者：张喜硕
    原文地址: https://segmentfault.com/a/1190000016826970
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞