What is right way to use select directive in angul

2019-09-08 02:21发布

问题:

I extend angular.dart.tutorial with basic CRUD operations. So in new edit_recipe_component.html I need to add some sort of selection input for recipe categories.

Currently I have

<select ng-model="ctrl.recipe.category">
   <option ng-repeat="c in ctrl.categories" value="{{c}}">{{c}}</option></select>

That works perfectly well on the surface: I can select category from the list, selected category is successfully stored in model and so on. But I get these errors in debug console:

NoSuchMethodError : method not found: 'ngValue'
Receiver: null
Arguments: []

STACKTRACE:
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:42)
#1      _SingleSelectMode.onModelChange.<anonymous closure> (package:angular/directive/input_select.dart:185:78)
#2      _SelectMode._forEachOption (package:angular/directive/input_select.dart:146:24)
#3      _SingleSelectMode.onModelChange (package:angular/directive/input_select.dart:183:19)

What I'm doing wrong?

Unfortunately APIDOCS to InputSelectDirective has no usage section

Update: I've created github project based on Chapter 6 sample where problem is reproduced It is here: https://github.com/vadimtsushko/angular_tutorial_chapter_06

Some debugging shows that setting category in Edit form works immediately and successfully (I've added category in Recipes list view for debug purpose). Error raised when I leave Edit form.

回答1:

I believe that this issue has been fixed for a while (hence no need for a patch), but in any case, you could also have used ng-value:

<select ng-model="ctrl.recipe.category">
   <option ng-repeat="c in ctrl.categories" ng-value="c">{{c}}</option></select>


回答2:

do a little patch on _SingleSelectMode class in input_select.dart

onModelChange(value) {
    var found = false;
    _forEachOption((option, i) {
      if (option == _unknownOption) return;
      if (expando[option] == null ) return;
      var selected = value == null ? option == _nullOption : expando[option].ngValue == value;
      found = found || selected;
      option.selected = selected;
    });