0

如何将normal select list代码转换为angular-ui-select directive代码。

我的代码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没有正确的价值。如何解决此问题或如何将普通选择转换为 ui-select 指令代码。

请指导。

4

1 回答 1

0

它对我有用：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>
于 2015-09-07T18:11:00.687 回答