ng-repeat内のスコープが定義されていません

次のコードでは、各ng-repeatの最後にフォームを作成してスコープに値を割り当てようとしています。ng-repeat内のスコープが定義されていません

何らかの理由で、（ng-modelを使用して）割り当てている値が渡されていません。

あなたはフィドル希望する場合：それ以外の場合は、ここで https://jsfiddle.net/U3pVM/27716/

をコードは次のとおりです。

app.js：

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

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

$scope.qstnrs = [ 
    //object #1 
    { 
    title: 'questionnaire 1', 
    author: 'dave', 
    questions: 
     [ 
     {qid: 1, qtype: 'multi'}, 
     {qid: 2, qtype: 'cross'} 
     ] 
    }, 

    //object #2 
    { 
    title: 'questionnaire 2', 
    author: 'raul', 
    questions: 
     [ 
     {qid: 1, qtype: 'lol'}, 
     {qid: 2, qtype: 'foreal'} 
     ] 
    } 
]; 

$scope.newQuestion = function(index) { 
    console.log($scope.type); 
    var question_id = $scope.qstnrs[index].questions.length +1; 
    $scope.qstnrs[index].questions.push({ 
      qid: question_id, 
      qtype: $scope.type 
     } 
    ); 

}; 

$scope.newQstnr = function() { 
    $scope.qstnrs.push({ 
     title: $scope.title, 
     author: 'admin', 
     questions: [] 
    }); 
    $scope.title = ''; 
}; 
}]);

私は未定義を受け取るコンソールに$scope.typeを記録しようとします。ここで

はHTMLです：私たちはアンケートに新しい質問を追加しようとすると

<html> 
<head> 
    <title>QMaker app</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-app="qmaker" ng-controller="MainCtrl"> 
    <!-- This form works fine, the next is problematic --> 
    <form ng-submit="newQstnr()"> 
     <input required type="text" ng-model="title"> 
     <button type="submit">New Questionnaire</button> 
    </form> 

    <div ng-repeat="qstnr in qstnrs"> 
     {{qstnr.title}} by {{qstnr.author}}<br> 
     <ul ng-repeat="question in qstnr.questions"> 
      <li>#{{question.qid}}: {{question.qtype}}</li> 
     </ul> 
     <!-- Form we're speaking about --> 
     <form ng-submit="newQuestion($index)"> 
      <input required type="text" ng-model="type"> 
      <button type="submit">[+] Question</button> 
     </form> 
    </div> 
</body> 
</html>

、タイプが表示され、または未定義表示されていません。

なぜこれが起こり、どのように機能させることができますか？

出典

2016-10-12 Airwavezx

これにフォームを変更し

：私の勘は、それがためにng-repeatに新しいスコープを作成することです...

$scope.newQuestion = function(index, type) { 
    var question_id = $scope.qstnrs[index].questions.length +1; 
    $scope.qstnrs[index].questions.push({ 
      qid: question_id, 
      qtype: type 
     } 
    ); 

};

そして、それは動作します。これに

<form ng-submit="newQuestion($index, type)"> 
    <input required type="text" ng-model="type"> 
    <button type="submit">[+] Question</button> 
</form>

そして、あなたの機能繰り返されるすべての入力が同じ値を共有しないようにすることができます。それ以外の場合、1つのテキストボックスに入力すると、すべての繰り返しテキストボックスに同じ値が表示されます。

<form ng-submit="newQuestion($index)"> 
    <input required type="text" ng-model="$parent.type"> 
    <button type="submit">[+] Question</button> 
</form>

$parentを追加すると、親スコープにそれを取り付ける：

実は、これはこれに形態を変化させることによりケースであることが判明しました。そうすれば、あなたのロジックはうまくいくが、私が話していた予期しない結果が出てくるのが分かるだろう。

出典

2016-10-12 15:42:56 Zach

（ 'console.log（type） 'では、うまく動作するはずです） – ValLeNain

これをキャッチしてくれてありがとう... – Zach

ng-repeat内のスコープが定義されていません

答えて

関連する問題