Question

我正在尝试设置组中最后一个输入字段的值，以等于其兄弟节点的值。在这种情况下，用户可以复制该组。

到目前为止，我所尝试的并不正常。如果用户复制字段，则只有最后一个组有效。关于如何实现这一目标的任何想法？

var addition = $(".duplicate");
var perQuestion = $(".per-question");

$(function() {

  addition.on("click", function() {

    perQuestion.first().clone().insertBefore(".per-question:first");

    $(".per-question").each(function() {

      var index = $(this).index() + 1;
      $(this).find(".questionNumber").text(index);
    });

  });


});

.per-question {
  width: 100%;
  text-align: center;
  display: block;
  margin-bottom: 15px;
  border: 3px solid #ddd;
  display: inline-block;
  padding: 20px;
}

.duplicate {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #0966bd;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 32px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="duplicate">+</div>

<div class="main" ng-app="">

  <div class="per-question">
    <div class="questionNumber"></div>
    <input type="text" ng-model="q1">
    <input type="text" ng-model="q2">
    <input type="text" ng-model="q3">

    <input type="text" name="toDb" value="{{q1}},{{q2}},{{q3}}" id="toDB">

  </div>
</div>

Answer 1

我建议您删除jQuery功能并在AngularJS中执行所有操作。您需要执行以下操作：

将您的按钮移至ng-app。
跟踪一系列问题，并使用ng-repeat生成per-question
每个人的HTML。
启动所述数组，以便从一个空问题开始。在您的按钮中添加ng-click处理程序，将新的空白问题附加到问题数组。

如果您希望在所有问题中共享q1，可以在$parent范围内定义{范围}，这将指向ng-repeat指令之外的范围。

此时，我通常建议使用controller和controllerAs语法，而不是使用$parent和ng-init来设置变量和范围的

.per-question {
  width: 100%;
  text-align: center;
  display: block;
  margin-bottom: 15px;
  border: 3px solid #ddd;
  display: inline-block;
  padding: 20px;
}

.duplicate {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #0966bd;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 32px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- define a starting collection of questions -->
<div ng-app="" ng-init="questions = [{}]">
    <!-- Use angular to push a new question to the array, ng-repeat will automatically render it -->
    <div class="duplicate" ng-click="questions.push({})">+</div>
    
    <div class="main">
      <!-- iterate over questions, showing a group for each one -->
      <div class="per-question" ng-repeat="question in questions">
        <div class="questionNumber"></div>
        <!-- q1 is defined on the parent scope (outside the ng-repeat) -->
        <input type="text" ng-model="$parent.q1">
        <input type="text" ng-model="question.q2">
        <input type="text" ng-model="question.q3">
    
        <input type="text" name="toDb" value="{{$parent.q1}},{{question.q2}},{{question.q3}}" id="toDB-{{$index}}">
    
      </div>
    </div>
</div>

使用组中输入字段的值作为组中最后一个输入字段的值

1 个答案: