Question

我可以使单选按钮工作并绑定到模型。但是，当页面加载时，即使有一个单选按钮，也没有显示选中的单选按钮。

这是Dart代码：

import 'package:angular/angular.dart';

@NgDirective(
  selector: '[my-controller]',
  publishAs: 'ctrl'
)
class MyController {
  List<String> fruits = ['apple', 'banana', 'kiwi'];
  String favorite;

  MyController() {
    favorite = fruits[1];
  }
}

main() {
  ngBootstrap(module: new Module()..type(MyController));
}

这是视图标记。一旦我开始选择无线电，UI就会正确更新，数据绑定也能正常工作。但是在页面加载时没有选择任何内容。不知道为什么会这样。

<!DOCTYPE html>
<html ng-app>
  <body>
    <div my-controller>            
      <div ng-repeat="fruit in ctrl.fruits">
        <input type="radio"
            name="fruits"
            ng-model="ctrl.favorite" 
            value="{{fruit}}">{{fruit}}
      </div>
      <div>{{ctrl.favorite}} is my favorite</div>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>
  </body>
</html>

Answer 1

我尝试了你的代码。经过一些实验，我发现切换属性ng-model和value的顺序可以解决问题。我认为这是一个错误。

<!DOCTYPE html>
<html ng-app>
  <body>
    <div my-controller>
      <div ng-repeat="fruit in ctrl.fruits">
        <input type="radio"
            name="fruits"
            value="{{fruit}}"
            ng-model="ctrl.favorite"
            >{{fruit}}</div>
      <div>{{ctrl.favorite}} is my favorite</div>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>
  </body>
</html>

在Angular Dart中使用单选按钮时出现问题

1 个答案: