Добавить список выбранных элементов в меню выбора - PullRequest
Новая
       5

Добавить список выбранных элементов в меню выбора

0 голосов
/ 16 ноября 2018

Я нашел этот очень хороший пример меню углового поиска. 

          <ui-select ng-model="ctrl.person.selected" theme="bootstrap">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

Рабочий пример в веб-редакторе

Я хотел бы расширить пример и добавить список выбранных элементов из меню выбора. Можете ли вы дать мне руку для реализации этой функции?

1 Ответ

0 голосов
/ 22 ноября 2018

Ниже кода сделает ваш выпадающий список множественным выбором и отобразит список спящих значений из выпадающего списка 

 <body class="ng-cloak" ng-controller="DemoCtrl as ctrl">
      Selected:<p ng-repeat="item in ctrl.person.selected"> {{item.name}}</p>

      <form class="form-horizontal">
        <fieldset>
          <legend>ui-select inside a Bootstrap form</legend>    
          <div class="form-group">
            <label class="col-sm-3 control-label">Default</label>
            <div class="col-sm-6">    

              <ui-select ng-model="ctrl.person.selected" theme="bootstrap" multiple="true">
                <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
                <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
                  <div ng-bind-html="item.name | highlight: $select.search">
                  </div>                  
                  <small ng-bind-html="item.email | highlight: $select.search"></small>
                </ui-select-choices>
              </ui-select>

            </div>
          </div>        
        </fieldset>
      </form>
    </body>

Библиотека ui-select дает несколько атрибутов для включения множественного выбора

Дляподробная документация для ui-select множественный выбор, нажмите здесь

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...