select 到 angular-ui-select 的正常列表不起作用

Question

如何将normal select list代码转换成angular-ui-selectdirective代码。

我的代码html:

<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f.value as f.text for f in bigValueOptions" ng-change="render()"></select>

我的控制器代码：

 $scope.bigValueOptions= [{
    text: 'min',
    value: 'min'
  }, {
    text: 'max',
    value: 'max'
  }, {
    text: 'avg',
    value: 'avg'
  }, {
    text: 'current',
    value: 'current'
  }, {
    text: 'total',
    value: 'total'
  }];

我尝试过的：

<ui-select id="viewSelector"
                        class="viewSelector input-small tight-form-input"
                        ng-model="panel.valueName"
                        theme="selectize"
                        ng-change="render()">
                        <ui-select-match placeholder="Select">{{$select.selected.text}}</ui-select-match>
                        <ui-select-choices repeat="f in bigValueOptions">
                          <div ng-bind-html="f.text"></div>
                        </ui-select-choices>
                    </ui-select>

panel.valueName 没有正确的值。如何解决这个问题或如何将普通 select 转换为 ui-select 指令代码。

请guide.

Answer 1

对我有用：Plunker

您是否定义了 $scope.panel = {};？

JS:

app.controller('DemoCtrl', function($scope, $http) {
  $scope.bigValueOptions= [{
    text: 'min',
    value: 'min'
  }, {
    text: 'max',
    value: 'max'
  }, {
    text: 'avg',
    value: 'avg'
  }, {
    text: 'current',
    value: 'current'
  }, {
    text: 'total',
    value: 'total'
  }];
  $scope.panel = {};
});

HTML:

<body ng-controller="DemoCtrl">
  Selected object: {{panel.valueName}}
  <ui-select id="viewSelector"
      class="viewSelector input-small tight-form-input"
      ng-model="panel.valueName"
      theme="selectize"
      ng-change="render()">
      <ui-select-match placeholder="Select">{{$select.selected.text}}</ui-select-match>
      <ui-select-choices repeat="f in bigValueOptions">
        <div ng-bind-html="f.text"></div>
      </ui-select-choices>
  </ui-select>
</body>

select 到 angular-ui-select 的正常列表不起作用

normal select list to angular-ui-select is not working

html

angularjs

angular-ui-select