AngularJS添加DOM元素

Question

我有一個關於用AngularJS添加DOM元素的問題。 我有以下示例：

我的例子

當我單擊表格單元格時，此span元素：

<span editable-text="serviceSchedule.startTime">HH:mm</span>

應該添加到單擊的表格單元格中。 我已經嘗試了很多，但是沒有成功。 我將非常感謝您的幫助！

Answer 1

我建議不要在單擊單元格時修改模型並讓綁定在DOM中起作用，而不是直接使用新元素來操作DOM。 這與AngularJS或任何其他MV *框架中使用的模式更加一致。

這是一個基於原始代碼的簡化示例。

 var myApp = angular.module('myApp', []); myApp.controller('MyController', ['$scope', function($scope) { //Data $scope.names = [ { id: 1, value: 'Hans Meier' }, { id: 2, value: 'Walter Mueller' }]; $scope.labels = [ { value: 'Montag: 21.09.2015', scheduleContainerCount: { 1: 0, 2: 0 } }, { value: 'Dienstag: 22.09.2015', scheduleContainerCount: { 1: 0, 2: 0 } }, { value: 'Mittwoch: 23.09.2015', scheduleContainerCount: { 1: 0, 2: 0 } }]; //Functions $scope.addScheduleContainer = function (name, label) { label.scheduleContainerCount[name.id]++; }; $scope.getRange = function (name, label) { return new Array(label.scheduleContainerCount[name.id]); }; }]); 

 td { border: 1px solid black; } table { border-collapse: collapse; } td > span { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <table ng-app="myApp" ng-controller="MyController"> <thead> <tr> <td></td> <td ng-repeat="label in labels">{{ label.value }}</td> </tr> </thead> <tbody> <tr ng-repeat="name in names"> <td>{{ name.value }}</td> <td ng-repeat="label in labels" ng-click="addScheduleContainer(name, label)"> <span ng-repeat="i in getRange(name, label) track by $index">HH:mm</span> </td> </tr> </tbody> </table>