please can someone help me with this little binding mess. I'm trying to generate a list of tasks
here is the model definition in my TaskController:
angular.module('yeomantestApp')
.controller 'TaskController', ($scope) ->
$scope.currentTask
$scope.tasks = [
{
id: 1
name: 'write test'
elapsedTime: 15
},
{
id: 2
name: 'run test'
elapsedTime: 32
},
{
id: 3
name: 'write code'
elapsedTime: 22
}
]
So, now I want to render the model with the following view. The view iterates over the task array and build a list of radio buttons for each task. My problem is, that the model binding to currentTask is somehow not working. When I select any task the currentTask model entry is not updating. But according the tutorials and documentation it should.
<div class="hero-unit" ng-controller="TaskController">
<h1>Tasks</h1>
<h2>current {{currentTask}}</h2>
<form name="taskForm">
<div ng-repeat="task in tasks">
<input type="radio" name="taskGroup" ng-model="currentTask" value="{{task.id}}">{{task.name}} {{task.elapsedTime}}
</div>
</form>
</div>
Add Radio Buttons Dynamically In order to create a radio button, we need to define the input element and assign it to a variable called input. Then, change its input type to radio. Finally, append the input element to the label element.
A radio button displays the setting of something in your application and is part of a group in which only one button can be on at a time. Use a group of radio buttons to choose among several options which are mutually exclusive.
Radio buttons allow a user to select a single option among multiple options. You can set the Choice Value of each option, for each button, as well as group these buttons by giving them the same Group Name.
Changing ng-model
attribute to ng-model="$parent.currentTask"
should solve your problem.
Here is the jsFiddle: http://jsfiddle.net/dp3xq/8/
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