data binding in nested angularjs repeater

Question

I have controller as follows:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.questionTypes = [
    {display: 'Text', 'name': 'text'},
    {display: 'Paragraph', 'name': 'textarea'},
    {display: 'Multiple Choice', 'name': 'radio'},
 ];

  $scope.top = {
    heading: '',
    questions: [
      {
        tite: 'title 1',
        choices: ['']
      }
    ]
  };

});

And an HTML body as follows:

<body ng-controller="MainCtrl">
    <input ng-model="top.heading" placeholder="heading"/>
    <br/>
    <div ng-repeat="question in top.questions track by $index">
        <select ng-model="question.type" ng-options="c.name as c.display for c in questionTypes"></select>
        <div ng-if="question.type == 'radio'">
            <div ng-repeat="option in question.choices track by $index">
              <input type="text" ng-model="option"/>
              <button ng-click="question.choices.push('')" ng-disabled="$index < question.choices.length - 1">Add</button>
              <button ng-click="question.choices.splice($index, 1)" ng-disabled="question.choices.length == 1">Del</button>
            </div>
        </div>
    </div>
    <pre>{{top | json}}</pre>
</body>

When the user makes the Multiple Choice selection, I want to show a fragment that provides the ability to add various choices. The choices are displayed in repeater.

That all works, but data binding on nested repeater is not working. I assuming this has something to do with scoping, but I can't figure it out.

Any help would be appreciated.

I have created a plunkr at http://plnkr.co/edit/6FxY44HgddRjrLOHlQGF

rob_hicks · Accepted Answer · 2013-12-17 20:54:18Z

3

After fumbling around with this for a while, this is what I did to fix the problem.

I changed:

<input type="text" ng-model="option"/> //after changing model to ng-model

To

<input type="text" ng-model="question.choices[$index]"/>

This allowed the input to reference the parent question object and the choices array on the object instead of referencing the option reference within ng-repeat.

answered Dec 17, 2013 at 20:54

rob_hicks

1,7443 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

data binding in nested angularjs repeater

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related