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

Question

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

//这是在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>

// 内部 控制器

$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

您在创建 <span> 元素之前使用 ID tags 获取参考 - 并且每个学生都会重复此 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>

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

AngularJS: Render tags dynamically in a separate div from a input box multiple times

javascript

angularjs

tags

angularjs-ng-repeat