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方法同樣，我能夠根據不一樣的屬性來判斷二者是不是一個對象。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。