Pre-fill selectize menu?

Question

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.

how? i tried a couple of things, might not be doing it right. — Steve, Mar 30 '15 at 20:35

score 2 · Answer 1 · answered Mar 30 '15 at 20:56

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>

Duplicate of your question at http://stackoverflow.com/questions/29309433/display-pre-selected-items-in-angular-selectize-menu Also you should accept the answer. — PhiLho, May 28 '15 at 12:44
This did not work for me, although it did put me on the right track. See my answer. — Steve, May 28 '15 at 14:50

score 0 · Answer 2 · answered May 28 '15 at 14:54

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

Pre-fill selectize menu?

2 Answers2

Linked