AngularJS 添加 DOM 元素答案

【问题标题】：AngularJS add DOM elementAngularJS 添加 DOM 元素
【发布时间】：2015-09-16 03:12:44
【问题描述】：

我有一个关于使用 AngularJS 添加 DOM 元素的问题。我有以下示例：

当我点击表格单元格时，这个 span 元素：

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

应添加到单击的表格单元格中。我尝试了很多但没有成功。非常感谢您的帮助！

【问题讨论】：

使用更新版本的 angular...demo 使用的是1.08，这不是一个非常成熟的版本
在您链接的这个示例中，任何地方都没有这样的元素。你试图做什么？您应该尝试使用 ng-hide 和 ng-show 在表格单元格中的元素之间切换。
是的，表格中没有这样的元素，因为我简化了示例（在原始示例中，时间范围也是可编辑的元素）。 ng-show 和 ng-hide 是不可能的，因为在一个单元格中可以有随机数量的时间范围。我的主要问题是如何在单击的单元格中使用 AngularJS 添加上面的元素。非常感谢您的帮助！
你永远不应该从 DOM 结构的角度来考虑 Angular 应用程序；相反，您应该考虑数据的结构，并允许您的模板代表您的数据。如果您尝试手动将元素插入 DOM，那么您可能做错了。这通常意味着您的数据结构不正确，或者您正在尝试做一些您的数据不知道的事情。

标签： javascript html angularjs html-table

【解决方案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>

【讨论】：