2016-10-12 2 views
0

다음 코드에서 각 ng-repeat가 끝날 때 양식을 만들고 범위에 값을 할당하려고합니다.ng-repeat의 범위가 정의되지 않았습니다.

내가 지정하는 값 (ng-model)은 전달되지 않습니다.

는 바이올린을 선호하는 경우 :

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를 로그온을 시도

내가 정의되지 않은을받을 그렇지 않으면 여기 https://jsfiddle.net/U3pVM/27716/

는 코드입니다. 여기

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

, 유형이 표시되지 않는, 또는 정의되지 않은 나타납니다.

왜 이런 일이 발생하며 어떻게 작동시킬 수 있습니까? 내 직감이가에 대한 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 추가하기 상위 범위에 첨부 :

실제로, I는이 형태로 변경하여 입증 경우이다. 그렇게하면 논리가 작동하지만 예기치 않은 결과가 나오는 것을 알 수 있습니다.

+1

('console.log (type) '이 있지만 그래도 잘 작동 할 것입니다.) – ValLeNain

+0

잡는 것에 감사드립니다 ... – Zach

관련 문제