angularjs - 使 Angular Material 选择的行为类似于 Angular ui 选择

Question

我想让 Angular Material 选择像我的 Angular 用户界面选择一样工作。我得到了其中一些工作，但有一个区别:Angular ui select 可以有一个不在他的 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>

正如你所看到的，Angular ui-select 与 ng-model test4 一起使用，即使它不在列表中，这正是我在 Angular Material Select 中想要的行为。有什么办法可以做到这一点还是我坚持使用 Angular ui select ？

Answer 1

尝试下面类似的操作。

我们正在装饰 mdOption 指令并将 ngModel 添加到 md-option 的 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);我的列表。我认为这更简单=)