1

ng-modelangulardart で複数選択を使用しようとしています。select は、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));
    }  
  }
4

2 に答える 2

1

DOM が更新されるたびに 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 に答える
1

私はまだこれを自分で使用していませんが、Angular.js API doc は別の方法で使用しているようです。

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 に答える