AngularJS添加DOM元素

Question

I have a question concerning adding DOM elements with AngularJS. I have the following example:

My Example

When I click in a table cell, this span element:

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

should be added to clicked table cell. I have tried a lot but with no success. I would be very thankful for help!

Answer 1

Rather than directly manipulating the DOM with a new element, I would suggest modifying your model when cells are clicked and let the bindings do the work in the DOM. This is much more in line with the patterns used in AngularJS or any other MV* framework.

Here is a simplified example based on your original code.

 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>