0

I want dynamic ng-model in ng-repeat and want to get value of these ng-models in controller. I searched it on google and used this solution of stackoverflow. But it's giving me undefined in my case.I don't know why so.

My HTML code is

 <div class="item" ng-repeat="question in quiz_questions">
            <p ng-bind-html="question.question"></p>
        <div class="dh_yabox">
            <div class="placeholder">Your Answer:</div>
            <input ng-model="answers[question.question]" class="ansf" type="text" />
        </div>
</div>    



<div ng-click="nextQuestion()" class="pay_btn btn_defa"><a class="next">Next Question</a></div>

Controller code is

$scope.nextQuestion = function(){
        console.log($scope.answers);
        angular.element('.slick-next').triggerHandler('click');
    }

and in quiz_questions following is the data

       [{"qid":"3","question":"<p>First Quiz Q2</p>\r\n\r\n<p><img alt=\"\" src=\"http://localhost/project/backend/uploads/qt-01.png\" style=\"width: 520px; height: 390px;\" /></p>\r\n","quiz_id":"6","answer":"test,question","time":"2016-09-22 12:43:28","quiz_name":"free quiz","id":"6"},{"qid":"1","question":"First Quiz Q1","quiz_id":"6","answer":"test,test1,test2","time":"0000-00-00 00:00:00","quiz_name":"free quiz","id":"6"}]

Can any body please tell me what am I doing wrong here?

Improve this question
3
  • Post a complete example in a plunkr that reproduces the error. The posted code doesn't even have any ng-repeat, and we have no idea what the error is, and when it happens. Commented Oct 7, 2016 at 7:20
  • What happens in function, called by angular.element('.slick-next').triggerHandler('click'); ? Commented Oct 7, 2016 at 7:40
  • this statement is just to show new slide. just before this line of code I am consoling answers which is coming undefined. Commented Oct 7, 2016 at 8:23

3 Answers 3

Reset to default
0

Few problems,

  • Initialized your ng-model as $scope.answers = {};
  • Where is .slick-next that you're triggering from your function ?
  • Check / Debug in your console if it gives any errors.
  • Bind HTML using $sce.trustAsHtml();

See the working example

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

myApp.controller('GreetingController', ['$scope', '$sce', function($scope, $sce) {
  $scope.answers = {};
  $scope.quiz_questions = [{"qid":"3","question":"<b>First Quiz Q2<b/>","quiz_id":"6","answer":"test,question","time":"2016-09-22 12:43:28","quiz_name":"free quiz","id":"6"},{"qid":"1","question":"<b>First Quiz Q1</b>","quiz_id":"6","answer":"test,test1,test2","time":"0000-00-00 00:00:00","quiz_name":"free quiz","id":"6"}];
  
  $scope.nextQuestion = function(){
        console.log($scope.answers);
        //angular.element('.slick-next').triggerHandler('click');
    }
  
  $scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div  ng-controller="GreetingController">
<div class="item" ng-repeat="question in quiz_questions">
                 <p ng-bind-html="get_pre(question.question)"></p>
        <div class="dh_yabox">
            <div class="placeholder">Your Answer:</div>
            <input ng-model="answers[question.question]" class="ansf" type="text" />
        </div>
</div>    


<div ng-click="nextQuestion()" class="pay_btn btn_defa"><a class="next">Next Question</a></div>
    </div>
</body>

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

2 Comments

yeah it worked just after adding $scope.answers = {}; but can you explain why do I need to initialize?
AngularJS is still JavaScript. So the variable needs to declare before using it.
0

Maybe, it's dot problem. Explained here

Try to use in your controller

$scope.model = {};
$scope.model.answers = {};

and

<div class="dh_yabox">
    <div class="placeholder">Your Answer:</div>
    <input ng-model="model.answers[question.id]" class="ansf" type="text" />
</div>

because ng-repeat create own scope and it brokes binding

Improve this answer

2 Comments

no its not working with model.
yeap, sorry. Not usefull answer
0

It is because $scope.answers is not initialized in your controller. Initialize it as an empty object.

$scope.answers = {};
Improve this answer

1 Comment

no its not working though its giving blank object in console.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.