ng-options track by 思考
生活随笔
收集整理的這篇文章主要介紹了
ng-options track by 思考
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
問題描述
昨天給陳杰講解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方法一樣，我可以根據不同的屬性來判斷兩者是否是一個對象。
總結
以上是生活随笔為你收集整理的ng-options track by 思考的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H5页面关于android软键盘弹出顶起
- 下一篇： Angular父子组件通过服务传参