使 angular material select 表现得像 angular ui select

Question

我想让 angular material select 像我的 angular ui select 一样工作。我得到了一些工作，但有一个区别：angular ui select 可以有一个对象，它不在他的 ng-model 列表中。

 <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>

如您所见，angular ui-select 与 ng-model test4 一起使用，即使它不在列表中，这正是我想要的 [=23] =] select。有什么方法可以做到，还是我坚持使用 angular ui select？

Answer 1

试试下面这样的方法。

我们正在装饰 mdOption 指令并将 ngModel 添加到 md 选项的 ngRepeat 集合中。

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);
        }

    }
  }
});

这不是生产就绪代码，只是一个想法。

编辑：尽管这有点奏效，但我还是决定在得到列表后立即使用简单的 $scope.list.unshift($scope.current_item);。我觉得更简单=)

使 angular material select 表现得像 angular ui select

Make angular material select behave like angular ui select

angularjs

angular-material

angular-ui-select