Question

我正在尝试将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;
}

编辑：根据Günter的回答，我写了这个指令：

  @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));
    }  
  }

Answer 1

我自己还没有使用过它，但Angular.js API文档似乎使用了不同的方法。

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插入它们。

Answer 2

我每次更新时都会通过检查Dart中的DOM来完成它：

@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;
  }
}

ng-model到angulardart中的多重选择

2 个答案: