AngularJS DOM

Last modified on: November 30, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="38e4a32d-6b71-4dbc-8763-b8df22e58695" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>AngularJS DOM: Dynamic Manipulation of HTML Elements</h3>
<h4>Introduction</h4>
<p>AngularJS provides powerful tools to manipulate the DOM (Document Object Model) dynamically using built-in directives and bindings. It simplifies tasks like showing/hiding elements, dynamically adding/removing content, and responding to user interactions&mdash;all while maintaining two-way data binding.</p>
<p>This guide covers common AngularJS techniques for interacting with the DOM effectively.</p>
<hr />
<h3>Key AngularJS Directives for DOM Manipulation</h3>
<h4>1. <strong><code>ng-show</code> and <code>ng-hide</code></strong></h4>
<p>Used to conditionally display or hide elements based on a boolean expression.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;button ng-click="toggleVisibility()"&gt;Toggle Visibility&lt;/button&gt;
  &lt;p ng-show="isVisible"&gt;This paragraph is visible!&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.isVisible = true;
    $scope.toggleVisibility = function() {
      $scope.isVisible = !$scope.isVisible;
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>2. <strong><code>ng-if</code></strong></h4>
<p>Removes or inserts elements in the DOM based on a condition.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;button ng-click="showMessage()"&gt;Toggle Message&lt;/button&gt;
  &lt;p ng-if="show"&gt;Hello, AngularJS!&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.show = false;
    $scope.showMessage = function() {
      $scope.show = !$scope.show;
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>3. <strong><code>ng-repeat</code></strong></h4>
<p>Used for looping through arrays or objects to generate DOM elements dynamically.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="item in items"&gt;{{ item }}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.items = ['Apple', 'Banana', 'Cherry'];
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>4. <strong><code>ng-class</code></strong></h4>
<p>Dynamically applies classes to an element based on an expression.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;button ng-click="toggleActive()"&gt;Toggle Active&lt;/button&gt;
  &lt;p ng-class="{ active: isActive }"&gt;This paragraph changes style.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.isActive = false;
    $scope.toggleActive = function() {
      $scope.isActive = !$scope.isActive;
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>CSS</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.active {
  color: green;
  font-weight: bold;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>5. <strong><code>ng-style</code></strong></h4>
<p>Applies inline styles dynamically.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;button ng-click="changeColor()"&gt;Change Color&lt;/button&gt;
  &lt;p ng-style="{ color: color }"&gt;This text changes color.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.color = 'black';
    $scope.changeColor = function() {
      $scope.color = $scope.color === 'black' ? 'blue' : 'black';
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>6. <strong><code>$compile</code> Service</strong></h4>
<p>Dynamically compiles and links HTML strings to the current scope.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;button ng-click="addElement()"&gt;Add Element&lt;/button&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope, $compile) {
    $scope.addElement = function() {
      const newElement = '&lt;p&gt;This is a new dynamically added paragraph.&lt;/p&gt;';
      const compiledElement = $compile(newElement)($scope);
      angular.element(document.getElementById('container')).append(compiledElement);
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>7. <strong><code>ng-click</code></strong></h4>
<p>Binds click events to a function in the controller.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;button ng-click="increment()"&gt;Click Me&lt;/button&gt;
  &lt;p&gt;You clicked {{ count }} times.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.count = 0;
    $scope.increment = function() {
      $scope.count++;
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>8. <strong><code>ng-init</code></strong></h4>
<p>Initializes values in the DOM directly.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app=""&gt;
  &lt;p ng-init="message='Welcome to AngularJS'"&gt;{{ message }}&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Combining DOM Manipulation Techniques</h3>
<p><strong>Example: Todo List</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="DOMApp" ng-controller="DOMCtrl"&gt;
  &lt;h1&gt;Todo List&lt;/h1&gt;
  &lt;input type="text" ng-model="newTask" placeholder="Enter task"&gt;
  &lt;button ng-click="addTask()"&gt;Add Task&lt;/button&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="task in tasks"&gt;
      {{ task }} &lt;button ng-click="removeTask($index)"&gt;Remove&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Controller</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('DOMApp', [])
  .controller('DOMCtrl', function($scope) {
    $scope.tasks = [];
    $scope.newTask = '';

$scope.addTask = function() {
      if ($scope.newTask.trim()) {
        $scope.tasks.push($scope.newTask);
        $scope.newTask = '';
      }
    };

$scope.removeTask = function(index) {
      $scope.tasks.splice(index, 1);
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More