Choose elements in the template's DOM

Question

Choose elements in the template's DOM

There is a specific template that I consistently reference on the same page:

<div ng-controller="templateController">
      <div class="source">
        <div ng-repeat="item in info">
            <div class="content" data-value="{{item.ID}}">{{item.name}}</div>
        </div>
    </div>
    <br style="clear:both" />
    <div class="receiver"></div>

</div>

I am looking to target all elements with class="content" within each instance of the template so that I can make changes to them dynamically. What is the best way to accomplish this using JavaScript?

EDIT :

Plunker

In the Plunker, the console.log should ideally output "1" twice, but instead it displays "1" first and then "2" when the second template loads.

javascript angularjs angularjs-scope

Answer 1

Answer №1

Here is a functional code snippet with an explanation:

https://example.com/codeSnippet123

The concept involves managing two lists and transferring data between them upon a click event.

angular.module("app", []);

angular
  .module("app")
  .controller("mainController", ["$scope", function($scope) {

  }]);

angular
  .module("app")
  .controller("listController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.sourceList = [
            {
                name: "Alice",
                ID: 1
            },
            {
                name: "Eva",
                ID: 2
            }
        ];

        $scope.receiverList = [
            {
                name: "Emily",
                ID: 3
            }
        ];

        $scope.moveItemToReceiver = function(item){
          $scope.receiverList.push(item);

          $.each($scope.sourceList, function(index){
            if($scope.sourceList[index].name == item.name){
              $scope.sourceList.splice(index, 1);
              return false;
            }
          });
        }
  }]);

Answer 2

Here is a functional code snippet with an explanation:

https://example.com/codeSnippet123

The concept involves managing two lists and transferring data between them upon a click event.

angular.module("app", []);

angular
  .module("app")
  .controller("mainController", ["$scope", function($scope) {

  }]);

angular
  .module("app")
  .controller("listController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.sourceList = [
            {
                name: "Alice",
                ID: 1
            },
            {
                name: "Eva",
                ID: 2
            }
        ];

        $scope.receiverList = [
            {
                name: "Emily",
                ID: 3
            }
        ];

        $scope.moveItemToReceiver = function(item){
          $scope.receiverList.push(item);

          $.each($scope.sourceList, function(index){
            if($scope.sourceList[index].name == item.name){
              $scope.sourceList.splice(index, 1);
              return false;
            }
          });
        }
  }]);

Answer 3

Answer №2

It is recommended in AngularJS to avoid direct DOM manipulation and instead utilize controller events for better application structure. However, when necessary, directives can be used for DOM manipulation.
Learn more about Creating Directives that Manipulate the DOM

To access children of a directive's element, you can use the link function.

function link(scope, element, attrs) {
    var content = angular.element(element[0].querySelector('.content'));
}

Check out this Stack Overflow post for additional insights

Answer 4

It is recommended in AngularJS to avoid direct DOM manipulation and instead utilize controller events for better application structure. However, when necessary, directives can be used for DOM manipulation.
Learn more about Creating Directives that Manipulate the DOM

To access children of a directive's element, you can use the link function.

function link(scope, element, attrs) {
    var content = angular.element(element[0].querySelector('.content'));
}

Check out this Stack Overflow post for additional insights

Choose elements in the template's DOM

Answer №1

Answer №2

Similar questions

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

Angular's Routeprovider: Navigating Your Way through the

What is the best way to place a floating elastic div on top of an elastic background and ensure that the div stays in place?

Using the comma separated values as the final parameter in the ng-repeat loop

Enhance Your Website with a jQuery Plugin for Dynamic Updates to ElementsgetPost

Generating consecutive numerical values within the auto table JSPDF column VusJs

How should filtering be properly done on a data array within a Redux reducer function?

Guide to setting up Firebase pagination in a NextJS 13 server component

Using JQuery to loop through JSON data and display it dynamically on a webpage

Problems with Nested Loops in JavaScript

Importing template Vue files into Router in Vue.js

Exploring the depths of nested ng-repeat using JSON structures

Discovering a specific value by locating a string in an array nested inside an object

Storing socket.io data in an array

What is the best way to transfer information from a layout to its children within the app directory of Next.js?

Switch between Bootstrap Chevron

Can a dropdown list be designed to appear as a box or div instead of the standard select option?

Issue with binding the expanded property in Angular Expansion Panel

Interested in resizing the arrow from big to small?

The combination of WASM and Node.js encounters an issue when attempting to utilize 'import.meta' outside of a module