ng-модель для множественного выбора в angulardart

Я пытаюсь использовать ng-model с множественным выбором в angulardart. Выбор динамически заполняется option django-autocomplete-light. После того, как я добавил несколько опций, моя модель (список) по-прежнему пуста.

Любой момент, на который я мог бы посмотреть?

Вот минимальный пример.

Шаблон:

 <span id="id_car-wrapper"
   class="modern-style autocomplete-light-widget"
   data-widget-bootstrap="normal"
   data-widget-maximum-values="4" data-widget-ready="1">
      <span id="id_expert-deck" class="deck"></span>
      <input
        type="text"
        name="car-autocomplete"
        id="id_car-autocomplete" value=""
        class="autocomplete"
        data-autocomplete-choice-selector="[data-value]"
        data-autocomplete-minimum-characters="1"
        data-autocomplete-url="/autocomplete/CarAutocomplete/"
        placeholder="car's name" autocomplete="off">

      <select style="display: none" class="value-select"
        name="cars" id="id_expert" multiple="multiple"
        ng-model="myctrl.cars"></select>

Контроллер:

@NgController(
    selector: '[a-selector]',
    publishAs: 'myctrl')
class MyController {
    List<String> cars;
}

Изменить: согласно ответу Гюнтера, я написал эту директиву:

  @NgDirective(selector: 'select[multiple]')
  class MultipleSelectDirective {
    SelectElement _selectElement;
    Compiler _compiler;
    Injector _injector;
    DirectiveMap _directiveMap;

    MultipleSelectDirective(Element this._selectElement, this._injector, this._compiler, this._directiveMap) {
      _selectElement.addEventListener('DOMNodeInserted',
          (_) => _compiler(_selectElement.childNodes, _directiveMap)(_injector, _selectElement.childNodes));
      _selectElement.addEventListener('DOMNodeRemoved',
          (_) => _compiler(_selectElement.childNodes, _directiveMap)(_injector, _selectElement.childNodes));
    }  
  }

dart angular-dart django-autocomplete-light
person Vincent    schedule 03.04.2014    source источник
comment
Можете ли вы создать минимальный пример, чтобы воспроизвести проблему? Контроллер и HTML-разметка и добавить это к своему вопросу?   -  person Günter Zöchbauer    schedule 03.04.2014

Ответы (2)


arrow_upward
1
arrow_downward

Я еще не использовал это сам, но документ API Angular.js, похоже, использует его по-другому.

ng-model содержит выбранное значение, а ng-options="myctrl.cars" назначает элементы.

Я ожидаю, что Angular.dart будет работать аналогично.

Это сработало для меня:

<div a-selector>
  <select multiple="multiple" ng-model='myctrl.selected'>
    <option ng-repeat='c in myctrl.cars'>{{f}}</option>
  </select>
</div>

Вам нужно добавить поле в контроллер, где вы можете назначить выбранные элементы (я использовал myctrl.selected), который получает List<String>.

ИЗМЕНИТЬ

Когда HTML изменен, вы должны скомпилировать его, чтобы Angular обработал новые элементы и директивы.

static dom.NodeValidator validator;
dom.Element _element;
Compiler _compiler;
Injector _injector;
DirectiveMap _directiveMap;
MyController(this._element, this._injector, this._compiler, this._directiveMap) {

_compiler(_element.childNodes, _directiveMap)(_injector, _element.childNodes);

Я думаю, что лучшим способом было бы попытаться получить значения из JavaScript в Dart, добавить их в свой контроллер и позволить ng-repeat вставить их.

person Günter Zöchbauer    schedule 03.04.2014
comment
Нет, Angulardart прекратил поддержку ng-options. К сожалению, я не могу снова найти ссылку. - person Vincent; 03.04.2014
comment
Тогда я бы ожидал, что потребуется ng-repeat. Я пытаюсь создать рабочий пример. - person Günter Zöchbauer; 03.04.2014
comment
Дело в том, что я не знаю доступные автомобили заранее, так как я получаю отфильтрованный список через REST API. Вот почему мой select пуст, я знаю, как заполнить его, учитывая существующий список дротиков. - person Vincent; 03.04.2014
comment
Я не понимаю проблемы. Когда вы где-то получаете значения, вы заполняете myctrl.cars этими значениями, а ng-repeat позаботится обо всем остальном. - person Günter Zöchbauer; 03.04.2014
comment
Генерирует ли django-autocomplete-light параметры без знания Angular? - person Günter Zöchbauer; 03.04.2014
comment
Да, это независимый плагин jQuery. - person Vincent; 04.04.2014
comment
Я попытался вызвать компилятор из прослушивателя событий, зарегистрированного директивой, но это не работает (прослушиватель событий срабатывает корректно). Должен ли компилятор вызываться из контроллера? - person Vincent; 10.04.2014
comment
Я думаю, это не должно иметь значения. Возможно, проблема в том, что вы запускаете компилятор для элемента, где он уже был запущен. Я использую этот код, чтобы процесс Angular динамически генерировал/добавлял HTML, но _compiler() вызывается только один раз для каждого элемента. Можете ли вы добавить свой код к своему вопросу, чтобы показать, как вы пытались его использовать? - person Günter Zöchbauer; 10.04.2014

arrow_upward
1
arrow_downward

Я закончил делать это, проверяя DOM из Dart каждый раз, когда он обновляется:

@NgDirective(selector: 'select[multiple][ng-model]')
class MultipleSelectDirective {
  SelectElement _selectElement;
  NgModel ngModel;
  Scope scope;

  MultipleSelectDirective(Element this._selectElement, this.ngModel, this.scope) {
    _selectElement.addEventListener('DOMNodeInserted',
        (_) => _setValue());
    _selectElement.addEventListener('DOMNodeRemoved',
        (_) => _setValue());
  }

  void _setValue() {
    List<OptionElement> options = _selectElement.selectedOptions;
    List val = [];
    options.forEach((o) => val.add(o.value));
    ngModel.viewValue = val;
  }
}
person Vincent    schedule 10.04.2014