嵌套的ng-repeat導致的問題

我必須處理一個問題，它的答案會動態生成。問題是當我添加一個問題並添加答案，然後當我添加另一個問題時，它已經包含與上述問題相同的答案。嵌套的ng-repeat導致的問題

例如：問：選擇冰激凌口味 A.巧克力 B.香草

現在，當我添加了另一個問題問：選擇冰激凌公司現在，這裏就說明 A.巧克力 B.香草

以下是我的代碼：

<div class="col-lg-12"> 
    <div ng-controller="CustomizationCtrlr"> 
     <form name="CustomizationForm" ng-submit="SaveCustomization(CustomizationForm.$valid)" novalidate> 
      <div> 
       <div class="inputDiv"> 
        @Html.TextBoxFor(model => model.GroupTitle, new { name = "GroupTitle", ng_model = "QuestionGroup.GroupTitle", @class = "form-control", maxlength = "65", placeholder = "GroupTitle" }) 
        <br /> 
       </div> 
       <div class="formgroup" ng-repeat="Question in Questions"> 
        <div class="inputDiv form-group" id="" ng-repeat="QuestionItem in QuestionItems" > 
         @Html.TextBoxFor(model => model.QuestionItemText, new { name = "QuestionItemText", ng_model = "QuestionItem.Text", @class = "form-control", placeholder = "Question Item Text", required = "required" }) 
         <button ng-show="showAddQuestionItem(QuestionItem)" ng-click="AddQuestionItem($parent.$index)">Add question item</button> 
         <br /> 
        </div> 
        <button ng-show="showAddQuestion(Question)" ng-click="AddQuestion()">Add question</button> 
       </div> 
      </div> 
      <button type="submit" name="btnPost" class="btn save-btn" onclick="ValidateForm()">Save Customizations</button> 
     </form> 
    </div> 
</div>

和FO我的腳本是：

<script>   
var app = angular.module('ProductCatalog.controllers', []) 
.controller('CustomizationCtrlr', function ($scope, $http) { 


    $scope.AddQuestionItem = function (parentIndex) { 
     var newItemNo = $scope.QuestionItems.length + 1 + "-" + parentIndex; 
     $scope.QuestionItems.push({ 'id': 'qi' + newItemNo }); 
    } 
    $scope.showAddQuestionItem = function (QuestionItem) { 
     return QuestionItem.id === $scope.QuestionItems[$scope.QuestionItems.length - 1].id; 
    }; 
    $scope.QuestionItems = [{ id: 'qi1', Text: '' }]; 

    $scope.AddQuestion = function() { 
     var newItemNo = $scope.Questions.length + 1; 
     $scope.Questions.push({ 'id': 'q' + newItemNo }); 
    } 
    $scope.showAddQuestion = function (Question) { 
     return Question.id === $scope.Questions[$scope.Questions.length - 1].id; 
    }; 
    $scope.Questions = [{ id: 'q1', Text: '' }]; 


})  

</script>

來源

2017-06-13 Sana

共享的代碼塊 - 在何處以及如何設置應答模式 – Sajal

問題項目基本上是答案。 – Sana

添加snipt，plunkr或其他... –

你有的方法包含不同的問題和問題的範圍。每當你添加一個新的問題時，問題項目已經填入了前一個輸入的前一個項目。

需要在這裏更改數據結構，在數組中爲問題項目保留一組問題和屬性。

$scope.Questions = [{ 
    "Id": "q1", 
    "QuestionItems": [{ 
     "Id": "qi1", 
     "Text": "" 
    }] 
    }]

這樣您就可以將問題及其項目組合在一起。

請看下面的代碼片段，爲了演示目的，我不得不刪除.net控件，你可以用你之前的剃鬚刀控件代替input。

var app = angular.module("MyApp", []); 
 
app.controller('CustomizationCtrlr', function($scope, $http) { 
 
    $scope.Questions = [{ 
 
    "Id": "q1", 
 
    "QuestionItems": [{ 
 
     "Id": "qi1", 
 
     "Text": "" 
 
    }] 
 
    }] 
 
    $scope.AddQuestionItem = function(ques) { 
 
    var newItemNo = ques.QuestionItems.length + 1 
 
    ques.QuestionItems.push({ 
 
     'Id': 'qi' + newItemNo, 
 
     "Text": "" 
 
    }); 
 
    } 
 
    $scope.showAddQuestionItem = function(QuestionItem) { 
 
    return QuestionItem.id === $scope.QuestionItems[$scope.QuestionItems.length - 1].id; 
 
    }; 
 

 
    $scope.AddQuestion = function() { 
 
    var newItemNo = $scope.Questions.length + 1; 
 
    $scope.Questions.push({ 
 
    "Id": "q" + newItemNo, 
 
    "QuestionItems": [{ 
 
     "Id": "qi1", 
 
     "Text": "" 
 
    }] 
 
    }); 
 
    } 
 
    $scope.showAddQuestion = function(Question) { 
 
    return Question.id === $scope.Questions[$scope.Questions.length - 1].id; 
 
    }; 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="MyApp"> 
 

 
    <div class="col-lg-12"> 
 
    <div ng-controller="CustomizationCtrlr"> 
 
     <form name="CustomizationForm" ng-submit="SaveCustomization(CustomizationForm.$valid)" novalidate> 
 
     <div> 
 
      <div class="inputDiv"> 
 
      <input type="text" ng-model="QuestionGroup.GroupTitle" placeholder="GroupTitle" /> 
 
      <br /> 
 
      </div> 
 
      <div class="formgroup" ng-repeat="Question in Questions"> 
 
      <div class="inputDiv form-group" id="" ng-repeat="QuestionItem in Question.QuestionItems"> 
 
       <input type="text" ng-model="QuestionItem.Text" placeholder="Question Item Text" /> 
 
       <button ng-click="AddQuestionItem(Question)">Add question item</button> 
 
       <br /> 
 
      </div> 
 
      <button ng-click="AddQuestion()">Add question</button> 
 
      </div> 
 
     </div> 
 
     <button type="submit" name="btnPost" class="btn save-btn" onclick="ValidateForm()">Save Customizations</button> 
 
     </form> 
 

 
     <pre>{{Questions | json}}</pre> 
 
    </div> 
 
    </div> 
 

 
</body>

來源

2017-06-13 07:26:59 Sajal

完美地工作。謝謝。 – Sana

你總是遍歷QuestionItems對你的範圍相同的參考。

如果你要的答案連接到你需要以某種方式創造每個問題唯一的答案陣列

一種方式來做到這一點是保存在財產問題實例的答案，然後NG-重複的疑問，

<div class="formgroup" ng-repeat="Question in Questions"> 
    <div class="inputDiv form-group" id="" ng-repeat="QuestionItem in Question.QuestionItems" > 
     @Html.TextBoxFor(model => model.QuestionItemText, new { name = "QuestionItemText", ng_model = "QuestionItem.Text", @class = "form-control", placeholder = "Question Item Text", required = "required" }) 
      <button ng-show="showAddQuestionItem(QuestionItem)" ng-click="AddQuestionItem($parent.$index, Question)">Add question item</button> 
      <br /> 
     </div>

而在JS：

$scope.Questions = [{ id: 'q1', Text: '', QuestionItems: [{ id: 'qi1', Text: '' }] }]; 
$scope.AddQuestionItem = function (parentIndex, parentQuestion) { 
    var newItemNo = $scope.QuestionItems.length + 1 + "-" + parentIndex; 
    parentQuestion.QuestionItems.push({ 'id': 'qi' + newItemNo }); 
}

來源

2017-06-13 07:41:56

嵌套的ng-repeat導致的問題

回答

相關問題