Make angular material select behave like angular ui select

Question

I want to make angular material select work like my angular ui select. I got some of it working but there is one difference: angular ui select can have a object that it's not in his list in his ng-model.

Fiddle for better understanding

 <ui-select ng-model="current_item" name="emitter" autocomplete="off" theme="select2" style="max-width:385px;">
    <ui-select-match placeholder="Select Item" title="{{$select.selected.name}}">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in list" refresh="refresh($select.search)" refresh-delay="0">
          <small>{{item.name}}</small>
    </ui-select-choices>
 </ui-select>

As you can see, angular ui-select is with ng-model test4 even tough it's not on the list, that's exactly the behaviour I want in angular material select. Is there any way to do it or am I stuck with angular ui select?

Answer 1

Try something like this below.

We are decorating mdOption directive and adding the ngModel into the collection of ngRepeat of the md-option.

fiddle solution with test4 showing as an option

myApp.directive('mdOption',function(){
    return {
    restrict: 'E',
    priority: 0,
    require: [ '^^mdSelect', '^^ngModel'],
    link: function(scope, ele, attr, ctrls) {
        var repeatExpr = attr.ngRepeat;
        var optionsModelStr = repeatExpr.match(/[ ]+in+[ ]+(.*?)([ \|]+)/)[1];
        var list = scope[optionsModelStr];
        var select = ctrls[0];
        var ngModel = ctrls[1];
        if (ngModel.$modelValue && list.indexOf(ngModel.$modelValue) < 0) {
          list.push(ngModel.$modelValue);
        }

    }
  }
});

This is not a production ready code but just an idea.

Edit: Altough this worked a little bit, I decided to go with a simple $scope.list.unshift($scope.current_item); right after I get my list. I think it's more simple =)