Skip to content

Commit

Permalink
fix(chips): hide remove button on custom template when readonly
Browse files Browse the repository at this point in the history
Add ng-if to the remove button, conditional on not readonly. Also tweak the custom input styling in the demo, and add the 'readonly' class to md-chip when it is readonly.

fixes angular#3697
  • Loading branch information
Ty Potter committed Aug 11, 2015
1 parent 4111c93 commit 99c68e0
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 4 deletions.
6 changes: 5 additions & 1 deletion src/components/chips/demoBasicUsage/style.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.custom-chips {
.md-chip {
position: relative;
padding-right: 35px;
.md-chip-remove-container {
position: absolute;
right: 4px;
Expand Down Expand Up @@ -35,5 +34,10 @@
}
}
}
&:not(.md-readonly) {
md-chip-template {
padding-right: 20px;
}
}
}
}
7 changes: 4 additions & 3 deletions src/components/chips/js/chipsDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,15 @@
class="md-chips">\
<md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
index="{{$index}}"\
ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index}">\
ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': $mdChipsCtrl.readonly}">\
<div class="md-chip-content"\
tabindex="-1"\
aria-hidden="true"\
ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
<div class="md-chip-remove-container"\
md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
<div ng-if="!$mdChipsCtrl.readonly"\
class="md-chip-remove-container"\
md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
</md-chip>\
<div ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl"\
class="md-chip-input-container"\
Expand Down

0 comments on commit 99c68e0

Please sign in to comment.