1

我正在尝试ng-model在 angulardart 中使用多项选择。option选择由 by动态填充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));
    }  
  }
4

2 回答 2

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

于 2014-04-03T16:31:54.317 回答
1

每次更新时，我通过检查 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;
  }
}
于 2014-04-10T12:06:53.010 回答