angularjs - 在对象上使用 ngRepeat 时如何设置选中

Question

我正在尝试设置 select2 下拉菜单的初始值。问题是该值是一个对象。我试着弄乱，initSelection但我什至无法让它调用它。我把它放进debugger去，什么也没有发生。ngSelected也不起作用:(

我做了一个plunker。

标记

<select ui-select2="opt" 
      ng-change="save()"
      ng-model="chosen" 
      data-placeholder="Choose">
      <option value=""></option>
      <option ng-repeat="item in list" value="{{item}}">{{item.a + ' ' + item.b}}</option>
</select>

控制器

app.controller('MainCtrl', function($scope) {
  $scope.selected = {a: 2, b: 22};
  $scope.list = [{a: 1, b: 11}, {a: 2, b: 22}];

  $scope.opt = { 
    allowClear: true,
    initSelection: function (elem, callback) {
      debugger; // this never triggers... :(
    }
  };

  $scope.save = function() {
    $scope.pre = $scope.chosen;
  };
});

我希望在$scope.selected下拉列表中选择值。

Answer 1

I had the same problem and i didn't find any solutions with initSelection.

but I solved it.. by following this example https://github.com/angular-ui/ui-select/blob/master/examples/demo.html

in your case you need to do like this:

 <ui-select ng-model="Choose" theme="select2" ng-disabled="disabled">
                <ui-select-match>{{$select.selected.a}}</ui-select-match>
                <ui-select-choices repeat="item in list | filter: {a: $select.search}">
                    <div ng-bind-html="item.a| highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>

Answer 2

那对你有用吗？

HTML：

<select ui-select2="opt" 
      ng-change="save()"
      ng-model="chosen" 
      data-placeholder="Choose">
      <option value=""></option>
      <option ng-repeat="item in list" value="{{item}}">{{item.a + ' ' + item.b}}</option>
</select>

JS：

app.controller('MainCtrl', function($scope) {
  $scope.selected = {a: 2, b: 22};
  $scope.list = [{a: 1, b: 11}, {a: 2, b: 22}];
  $scope.chosen = $scope.selected;

  $scope.opt = { 
    allowClear: true,
    initSelection: function (elem, callback) {
      debugger; // this never triggers... :(
    }
  };

  $scope.save = function() {
    $scope.pre = $scope.chosen;
  };
});