6

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>
Johann Sonntagbauer
  • 1,294
  • 1
  • 10
  • 20

1 Answers1

12

Changing ng-model attribute to ng-model="$parent.currentTask" should solve your problem.

Here is the jsFiddle: http://jsfiddle.net/dp3xq/8/

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • you are my hero!!!! i should have used the scope debugging feature right away THX a lot – Johann Sonntagbauer Nov 02 '12 at 16:43
  • 1
    Or better yet http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html to track down scope-related issues :-) – pkozlowski.opensource Nov 02 '12 at 16:47
  • 1
    See also http://stackoverflow.com/questions/12744788/angularjs-table-sort-with-ng-repeat, where two other "nested scope" solutions are presented: 1) use a controller method to modify currentTask 2) make currentTask a non-primitive type, so that the ng-repeat scopes get a reference to it (instead of a local copy). – Mark Rajcok Nov 12 '12 at 18:38