ng-repeatの動的ng-modelとコントローラのjsの取得

ng-repeatで動的ng-modelが必要で、コントローラのこれらのng-modelの値を取得したい。私はGoogleでそれを検索し、thisのstackoverflowのソリューションを使用しました。しかし、それは私のケースでは私に未定義を与えている。私はなぜそうは分かりません。ng-repeatの動的ng-modelとコントローラのjsの取得

私のHTMLコードを

<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>

コントローラー・コードが

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

と、次のquiz_questionsになっているが、データが

 [{"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"}]

すべてのボディは、私が間違って何をやっている私に教えてくださいすることができていますここに？

出典

2016-10-07 user3110655

エラーを再現plunkrで完全な例を実施例を参照してください。投稿されたコードにはng-repeatも含まれていないため、エラーが何であるのか、いつ発生するのかはわかりません。 –

'angle.element（ '。slick-next'）によって呼び出された関数ではどうなりますか？triggerHandler（ 'click'）;'？ –

このステートメントは新しいスライドを表示するだけです。このコード行の直前に私は未定義の答えを慰めています。 – user3110655

いくつかの問題、

あなたの関数から.slick-nextをトリガしているされて$scope.answers = {};
としてあなたng-modelを初期化？
エラーが発生した場合は、consoleにある[確認/デバッグ]をクリックします。
バインドHTML $sce.trustAsHtml();

を使用してポストに

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>

出典

2016-10-07 08:39:41

これは$ scope.answers = {}を追加した直後です。なぜ初期化する必要があるのか説明できますか？ – user3110655

AngularJSはまだJavaScriptです。したがって、変数を使用する前に宣言する必要があります。 –

多分、それはdotの問題です。

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

と

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

独自のスコープを作成NGが-繰り返して、それが結合brokesので、あなたのコントローラで使用するhere

てみてくださいを説明

出典

2016-10-07 07:21:35

いいえ、モデルで動作しません。 – user3110655

yeap、申し訳ありません。有用でない答え –

それはscope.answersが$からですあなたのコントローラでは初期化されていません。空のオブジェクトとして初期化します。

$scope.answers = {};

出典

2016-10-07 07:36:10

コンソール上で空白のオブジェクトを与えても機能しません。 – user3110655

ng-repeatの動的ng-modelとコントローラのjsの取得

答えて

関連する問題