Question

我正在浏览角度飞镖教程，我尝试制作一个项目列表，当点击一个项目时，用点击项目的文本填充输入。这工作正常，直到我修改输入中的文本。之后单击列表中的另一个项目不会更新输入字段中的文本（在它之前），也不会修改列表中的项目。

我的起点是2教程，但是尝试将它与第一个中的输入结合起来。

我的html文件：

<!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>

我的飞镖文件：

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

知道我做错了吗？

理想的行为应该是：

显示列表中的项目
当其中任何一个点击时，输入字段会更新
编辑输入字段的值时，列表中当前选定的项目将使用新文本进行更新
在任何时候点击某个项目都会更新输入文件的值

Answer 1

使用带有input指令的ng-model元素进行双向绑定：

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

@NgTwoWay注释仅用于class DataValue中使用的组件或控制器中，但会被忽略。

为什么模型不会更新？

1 个答案: