问题描述
昨天给陈杰讲解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时是选不中的。
选中原理
三个选项。
{ 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方法一样，我可以根据不同的属性来判断两者是否是一个对象。
3847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
