angularjsangular-materialangular-ui-select

Make angular material select behave like angular ui select


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?


Solution

  • 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 =)