This repository has been archived by the owner on Aug 29, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(select): when using trackBy, trigger ng-change only when tracked …
…property is different * Add mdSelect demo to ease debugging * Add support for ng-model-options to be updated after initialization * Add and fix tests Closes #11108
- Loading branch information
1 parent
90c8b8d
commit ecd55d0
Showing
5 changed files
with
179 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<div layout="column" layout-align="center center" class="md-padding" ng-cloak> | ||
<div layout="row" layout-align="space-between"> | ||
<div ng-controller="AppCtrl as ctrl" layout="column" flex="40"> | ||
<div> | ||
<h1 class="md-title">Without trackBy</h1> | ||
<div layout="row"> | ||
<md-input-container> | ||
<label>Items</label> | ||
<md-select ng-model="ctrl.selectedItem" | ||
ng-change="ctrl.modelHasChanged = true"> | ||
<md-option ng-repeat="item in ctrl.items" ng-value="item"> | ||
{{ item.name }} | ||
</md-option> | ||
</md-select> | ||
</md-input-container> | ||
</div> | ||
</div> | ||
<div layout="column"> | ||
<h5>Initial model</h5> | ||
<code><pre>{{ ::ctrl.selectedItem | json }}</pre></code> | ||
<h5>Current model</h5> | ||
<code><pre>{{ ctrl.selectedItem | json }}</pre></code> | ||
<span ng-show="ctrl.modelHasChanged">Model has changed</span> | ||
</div> | ||
</div> | ||
|
||
<div ng-controller="AppCtrl as ctrl" layout="column" flex="40"> | ||
<div> | ||
<h1 class="md-title">With trackBy</h1> | ||
<div layout="row"> | ||
<md-input-container> | ||
<label>Items</label> | ||
<md-select ng-model="ctrl.selectedItem" | ||
ng-change="ctrl.modelHasChanged = true" | ||
ng-model-options="{ trackBy: '$value.id' }"> | ||
<md-option ng-repeat="item in ctrl.items" ng-value="item"> | ||
{{ item.name }} | ||
</md-option> | ||
</md-select> | ||
</md-input-container> | ||
</div> | ||
</div> | ||
<div layout="column"> | ||
<h5>Initial model</h5> | ||
<code><pre>{{ ::ctrl.selectedItem | json }}</pre></code> | ||
<h5>Current model</h5> | ||
<code><pre>{{ ctrl.selectedItem | json }}</pre></code> | ||
<span ng-show="ctrl.modelHasChanged">Model has changed</span> | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
(function() { | ||
'use strict'; | ||
angular | ||
.module('selectDemoTrackBy', ['ngMaterial', 'ngMessages']) | ||
.controller('AppCtrl', function() { | ||
this.selectedItem = { | ||
id: '5a61e00', | ||
name: 'Bob', | ||
randomAddedProperty: 123 | ||
}; | ||
|
||
this.items = [ | ||
{ | ||
id: '5a61e00', | ||
name: 'Bob', | ||
}, | ||
{ | ||
id: '5a61e01', | ||
name: 'Max', | ||
}, | ||
{ | ||
id: '5a61e02', | ||
name: 'Alice', | ||
}, | ||
]; | ||
}); | ||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
code { | ||
display: block; | ||
padding: 8px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters