CODEWITHSUNDEEP
angularjs
user3407039
user3407039

Reputation: 1335

AngularJS: Object in ng-repeat not displaying object updates

I have this loop displaying all the possible questions I want on screen. I append to this list using a directive and these updates display fine.

    {{Questions}}

        <div id="items" style="border: 3px solid; border-radius:5px; border-color: #808080; min-height: 500px; padding: 10px;">
            <div question-type ng-repeat="Question in Questions track by $index"></div>
        </div>

However, when I click on a question I then display the contents for that question elsewhere on the page with a editable fields so you can modify it.

You can see in the above code I am displaying the Questions json object to the screen above the loop, and this correctly displays my updates as I'm typing, but the contents of the loop does not. The questions in the loop will stay as they did when they were created and not update.

Any idea why the Object appears to be updating but it is having no affect on the ng-repeat using it?

EDIT

Here is the directive I am using with the ng-repeat

app.directive('questionType', function ($http, $compile) {
    return {
        restrict: 'AE',
        link: function (scope, element, attr, model) {

            switch (scope.Question.inputType) {
                case 'checkbox':
                    //element.append('<input type="checkbox" ng-model="Question.checked"/><button ng-if="input.checked" >X</button>');
                    break;
                case 'text':
                    var strElm = '<div class="form-group" data-ng-click="selectProperties($index)"><label class="col-lg-12 control-label" style="text-align: left;">' + scope.Question.label + '</label><div class="col-lg-12"><input type="text" class="form-control" placeholder=' + scope.Question.placeholder + ' readonly></div></div>';
                    var compiledHtml = $compile(strElm)(scope);
                    element.append(compiledHtml);
                    break;
            }
        }
    };
});

SECOND EDIT

I was not binding correctly. Got it working with this line - 

var strElm = '<div class="form-group" data-ng-click="selectProperties($index, obj.Questions)"><label class="col-lg-12 control-label" style="text-align: left;" >{{Question.label}}</label><div class="col-lg-12"><input type="text" class="form-control" placeholder=' + scope.Question.placeholder + ' readonly ng-model="Question.placeholder"></div></div>';

Upvotes: 0

Views: 211

Answers (2)

fantarama
fantarama

Reputation: 880

Try changing your code like this:

<div ng-repeat="Question in Questions track by $index">
    <question-type question="Question"></question-type>
</div>

And change your directive definition too

Upvotes: 0

Carsten
Carsten

Reputation: 4208

Your ng-repeat creates an isolated scope.

Put Questions inside an empty object and use that.

example:

$scope.obj = {};

$scope.obj.Questions = your questions json.

In your HTML you have to refer to it in your ng-repeat as obj.Questions

Upvotes: 1

Related Questions