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>

控制器内部

$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>元素之前，您使用 IDtags获取引用 - 并且每个学生重复此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>