预填充选择菜单?

时间:2015-03-30 17:13:07

标签: javascript angularjs selectize.js

我有一个选择性菜单:

<input type="text" selectize="usersSelect.options" options="users" ng-model="users.selected" />

“users”是我的对象数组。此菜单工作正常,我可以从菜单中选择,提前输入,并获得标记化名称。我的控制器选项是:

$scope.usersSelect = {
 options: {
  valueField: 'full_name',
  labelField: 'full_name',
  searchField: ['full_name'],
  plugins: ['remove_button']
 }
};

除了现在我有另一个6“full_name”字符串的数组,我需要在开始的菜单中。我找不到任何关于如何预先填充这些菜单的文档。我正在使用Angular 1.3。

2 个答案:

答案 0 :(得分:2)

您可以为模型设置值:

&#13;
&#13;
<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/kbanman/selectize-ng/master/dist/selectize-ng.js"></script>
    </head>
    <body data-ng-app="app" data-ng-controller="MainController">
        <input type="text" selectize="config" options="suggestions" ng-model="selected"/>

        <script>
            var app = angular.module('app', ['selectize-ng']);
            app.controller("MainController", function($scope, $timeout) {
                $scope.config = {valueField: 'value',
                    labelField: 'text'};
                $scope.suggestions = [{ value: 1, text: 'One' },
                    { value: 2, text: 'Two' },
                    { value: 3, text: 'Three' },
                    { value: 4, text: 'Four' }];
                $scope.selected = [$scope.suggestions[0]['value'], $scope.suggestions[3]['value']];
            });
        </script>
    </body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

查看发布的其他答案给了我一个为选中分配数组的想法,但该答案中的语法在执行时给出了错误,如JSHINT。

所以,我做了实验,直到我得到了这个:

  _this.roleMenu = {
    config: {
      valueField: 'name',
      labelField: 'name',
      plugins: ['remove_button']
    },
    suggestions: _this.roles,
    selected: []
  };

  _this.roleMenu.selected = [
    _this.roleMenu.suggestions[2].name
  ];

对于html中的此菜单:

<select selectize="invite.roleMenu.config" options="invite.roleMenu.suggestions" ng-model="invite.roleMenu.selected" />

这假设我的页面控制器为InviteController as invite