Pre-fill selectize menu?

问题

I have a selectize-ng menu:

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

"users" is my array of objects. This menu works perfectly, I can select from the menu, type-ahead, and get tokenized names. My controller options are:

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

Except now I have another array of 6 "full_name" strings I need to be IN the menu at the start. I can't find any docs on how to pre-populate these menus. I'm using Angular 1.3.

回答1:

You can set values to your model:

<!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>

回答2:

Looking at the other answer posted gave me the idea of assigning an array to selected, but the syntax in that answer gave me errors both in execution as in JSHINT.

So, I experimented until I got this:

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

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

For this menu in html:

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

This assumes my page controller to be InviteController as invite

来源：https://stackoverflow.com/questions/29352217/pre-fill-selectize-menu

标签

javascript

angularjs

selectize.js