Wednesday, September 16, 2015

Angular selected event for UI-Select

  This is how we can call a function based on the selected item from the UI-Select directive.

Note : By default if we use the select.css file there is an issue with text overflow when selected.
This can be resolved by adding the following style sheets at the bottom




Edit in Plunker

/* OVERFLOW FIX */
.ui-select-match-text.pull-left {
  float: none !important;
}

.ui-select-match-text > span { 
   display: block; 
   text-overflow: ellipsis; 
   overflow: hidden; 
 }

.ui-select-toggle > a.btn-link  {
  top: 6px;
  position: absolute;
  right: 20px;
}

.ui-select-match-text {
  margin-right: 35px;
}





Html

<ui-select id="organization" ng-model="data.SelectedOrganization" class="form-control-static" on-select="fromSelected($item, $model)">
                <ui-select-match placeholder=" select a organization...">
                    {{$select.selected.Text}}
                </ui-select-match>
                <ui-select-choices repeat="org in data.Organizations | propsFilter: {Text: $select.search}">
                    <div ng-bind-html="org.Text | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>

No comments:

Post a Comment