CODEWITHSUNDEEP
javascripthtmlangularjshtml-table
quma
quma

Reputation: 5733

AngularJS add DOM element

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!

Upvotes: -1

Views: 134

Answers (1)

Drew Gaynor
Drew Gaynor

Reputation: 8472

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>

Upvotes: 1

Related Questions