javascript - AngularJS:多次在输入框的单独div中动态呈现标签

Question

好的，我有一个显示多个学生数据的 ng-repeat，现在我想在每个 ng-repeat 中添加一个包含标签的标签部分。因此，基本上他们将是一个输入元素，它采用 sag 名称并将其添加到该特定学生的标签部分。

//这是在 ng-repeat

里面

<form>
<div id="tags">
</div>
<br>
<input id="tagvalue" ng-keypress="myFunct($event)" class="inputTag"
       ng-model="addtags" placeholder="Add a tag"> 
</form>

//内部 Controller

$scope.myFunct = function(keyEvent) {
 if (keyEvent.which === 13)
 {
   var value = document.getElementById('tagvalue')
   var target = document.getElementById('tags');
   var newElement = angular.element("<span class='badge'>"+value.value+"</span>");

   angular.element(target).append(newElement);
   this.addtags=""
  }
}

输入字段是为所有学生创建的，但标签部分仅对第一个学生有效

Answer 1

您正在使用 ID tags在创建 <span> 之前获取引用元素 - 而这个 id正在为每个学生重复，这就是为什么只为第一个学生添加标签的原因；

您可以采用不同的方法，将这些标签添加到学生对象本身，然后使用嵌套的 ng-repeat 简单地打印标签；

下面的工作片段:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.studentsData = [{
    name: 'Mr. one',
    tags: []
  }, {
    name: 'Ms. two',
    tags: []
  }, {
    name: 'Mr. three',
    tags: []
  }, {
    name: 'Mr. four',
    tags: []
  }, {
    name: 'Ms. five',
    tags: []
  }, ];

  $scope.myFunct = function(keyEvent, indexNumber) {

    if (keyEvent.which === 13 && this.addtags.length > 0) {
      var value = document.getElementById('tagvalue');
      $scope.studentsData[indexNumber].tags.push(this.addtags);
      this.addtags = "";
    }
  }
});

.badge {
  border: 1px solid red;
  margin: 2px;
}

input {
  float: right;
}

.students {
  margin: 5px
}

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

<div ng-app="myApp" ng-controller="formCtrl">
  <form>

    <div class='students' ng-repeat='item in studentsData'>
      Student Name: <b>{{item.name}}</b>
      <ng-container id="tags" ng-repeat='tag in item.tags' class='badge'>
        <span> {{tag}} </span>
      </ng-container>
      <input id="tagvalue" ng-keypress="myFunct($event, $index)" class="inputTag" ng-model="addtags" placeholder="Add a tag">

    </div>
  </form>
</div>