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?

Community
  • 1
  • 1
user3110655
  • 121
  • 3
  • 20
  • 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. – JB Nizet Oct 07 '16 at 07:20
  • What happens in function, called by `angular.element('.slick-next').triggerHandler('click');` ? – Alexander Anikeev Oct 07 '16 at 07:40
  • this statement is just to show new slide. just before this line of code I am consoling answers which is coming undefined. – user3110655 Oct 07 '16 at 08:23

3 Answers3

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

Community
  • 1
  • 1
Alexander Anikeev
  • 701
  • 6
  • 15
0

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

$scope.answers = {};
Vikram S. Rathore
  • 36
  • 4
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>
Mohit Tanwani
  • 6,608
  • 2
  • 14
  • 32