AngularJS add DOM element

Question

I have a question concerning adding DOM elements with AngularJS. I have the following 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!

use a more current version of angular...demo is using 1.08 which is not a very mature version — charlietfl
– charlietfl, Commented Sep 15, 2015 at 17:58
In this example that you linked, there's no such element anywhere. What did you try to do? You should try using ng-hide and ng-show to toggle between elements in the table cell. — Gabriel Pires
– Gabriel Pires, Commented Sep 15, 2015 at 18:23
Yes, there is no such element in the table because because I simplified the example (In orginal example the time ranges are also editable <span/> elements). ng-show and ng-hide is not a possibility because in one cell there can be a random number of timeranges. My main question would be how to add the <span /> element above with AngularJS in the clicked cell. Thanks a lot for help!! — quma
– quma, Commented Sep 15, 2015 at 18:49
you should never think of an angular app in terms of how your DOM is structured; rather, you should think about how your data is structured, and allow your templates to represent your data. If you are trying to insert elements into the DOM by hand, then you are probably doing it wrong. It usually means your data isn't structured right, or you are trying to do something that your data isn't aware of. — Claies
– Claies, Commented Sep 15, 2015 at 19:18

Drew Gaynor · Accepted Answer · 2015-09-15 19:12:44Z

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>

Collectives™ on Stack Overflow

AngularJS add DOM element

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related