Menu
I can make radio buttons work and bind to a model. However, when the page loads, no radio button is shown as being selected, even though one is.
Here is the Dart code:
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));
}
And here is the view markup. Once I start selecting radios, the UI updates correctly, and the data binding works. But nothing is selected when the page loads. Not sure why that is the case.
<!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>
584
I tried your code. After some experimenting I saw that switching the order of the attributes ng-model and value solves the problem. I would consider this a bug.
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
