Why doesn't the model get updated?

StackOverflow https://stackoverflow.com/questions/22824270

  •  26-06-2023
  •  | 
  •  

Pergunta

I'm going through the angular dart tutorials and I tried to make a list of items and when one is clicked fill an input with the clicked item's text. This works OK until I modify the text in the input. After that clicking another item in the list does not update the text in the input field (before it did), and neither gets the item in the list modified.

My starting point the 2 tutorial, but trying to combine it with some input as in the first one.

My html file:

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
  </head>

  <body>
    <div data-list>
      <ul>
        <li ng-repeat="data in ctrl.dataList" ng-click="ctrl.selectData(data)">{{data.text}}</li>
      </ul>
      <input type="text" value="{{ctrl.selected.text}}">
    </div>
    <script type="application/dart" src="spa.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

My dart file:

import 'package:angular/angular.dart';

@NgController(
  selector: '[data-list]',
  publishAs: 'ctrl'
)
class DataController{

  DataValue selected;
  List<DataValue> dataList = [new DataValue("uno"), new DataValue("dos"), new DataValue("tres")];

  void selectData(DataValue selected){
    this.selected = selected;
  }

}

class DataValue{

  @NgTwoWay('text')//Also tried without this. Same result
  String text;

  DataValue(this.text);
}

class DataAppModule extends Module{
  DataAppModule(){
    type(DataController);
  }
}

void main(){
  ngBootstrap(module: new DataAppModule());
}

Any idea what I'm doing wrong?

The desired behavior should be:

  • the items in the list are displayed

  • when any of them is click the input field gets updated

  • when editing the input field's value the currently selected item of the list gets updated with the new text

  • At any moment clicking an item updates the value of the input file

Foi útil?

Solução

Use the input element with the ng-model directive to have a two-way binding:

...
<input type="text" ng-model="ctrl.selected.text">
...

The @NgTwoWay annotation is only used in components or controllers, used in class DataValue it is ignored.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top