Question

我必须处理会出现问题的情况，并且会动态生成答案。问题是当我添加一个问题并添加其答案然后当我添加另一个问题时，它已经包含与上述问题相同的答案。

例如：问：选择冰淇淋口味 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>

以下是我的剧本：

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

Answer 1

您总是在您的范围内迭代相同的QuestionItem参考。

如果您想连接问题的答案，您需要以某种方式为每个问题创建唯一的答案数组

一种方法是将问题实例中的答案保存在属性中，然后重复该

<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 });
}

Answer 2

您拥有的方法包含Question和QuestionItems的不同范围。无论何时添加新问题，问题项目都已填充上一个输入中的先前条目。

需要在此更改数据结构，在问题项的数组中保留一组问题和一个属性。

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

嵌套的ng-repeat导致问题

2 个答案: