预填充选择菜单

Pre-fill selectize menu?

本文关键字：菜单 选择 填充      更新时间：2023-09-26

我有一个选择菜单：

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

您可以为您的模型设置值：

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

查看发布的另一个答案，我想到了将数组分配给selected，但该答案中的语法在执行中和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

相关文章：