Javascript 在模板中选择DOM元素

我在同一页面上多次调用此模板：

<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>

{{item.name}

然后我想选择每个模板范围内具有

class=“content”

的所有元素，以便对它们进行操作。 如何使用JS实现这一点

编辑：

---

在这个planker中，console.log应该打印“1”两次，然后在第二次加载模板时打印“1”，然后再打印“2”

大多数时候，您不想在Angularjs中进行DOM操作，而是用控制器钩住事件。如果您必须在AngularJS中进行DOM操作，您可以使用指令

然后可以使用

链接
函数获取指令元素的子元素

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

大多数情况下，您不希望在Angularjs中执行DOM操作，而是希望使用控制器钩住事件。如果您必须在AngularJS中进行DOM操作，您可以使用指令


然后可以使用
链接
函数获取指令元素的子元素

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

经过更多解释，这里是一个工作示例：


其主要思想是创建两个列表，并对这两个列表进行迭代，只需单击即可在它们之间移动数据

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

angular
  .module("demo")
  .controller("demoController", ["$scope", function($scope) {

  }]);

angular
  .module("demo")
  .controller("templateController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.sourceList = [
            {
                name: "john",
                ID: 1
            },
            {
                name: "Edward",
                ID: 0
            },
            {
                name: "Carl",
                ID: 2
            }
        ];

        $scope.receiverList = [
            {
                name: "Bob",
                ID: 1
            }
        ];

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

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

经过进一步解释，这里是一个工作示例：


其主要思想是创建两个列表，并对这两个列表进行迭代，只需单击即可在它们之间移动数据

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

angular
  .module("demo")
  .controller("demoController", ["$scope", function($scope) {

  }]);

angular
  .module("demo")
  .controller("templateController", ["$scope", "$timeout", function($scope, $timeout) {
            $scope.sourceList = [
            {
                name: "john",
                ID: 1
            },
            {
                name: "Edward",
                ID: 0
            },
            {
                name: "Carl",
                ID: 2
            }
        ];

        $scope.receiverList = [
            {
                name: "Bob",
                ID: 1
            }
        ];

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

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

请包括尝试的解决方案，为什么它们不起作用，以及预期的结果。这将真正帮助我们解决代码的问题。谢谢是什么引发了操纵？按按钮？所以每个模板都有自己的控制器，它有自己的作用域？你是说你需要为每个实例操作info变量吗？@palaѕѕѕ检查plunker和EDIT@user441521请检查编辑为什么希望它打印两次1？在html中有两个类为“source”的元素。最好不要在控制器中操纵DOM。你希望做什么样的操作？请包括尝试的解决方案，为什么它们不起作用，以及预期的结果。这将真正帮助我们解决代码的问题。谢谢是什么引发了操纵？按按钮？所以每个模板都有自己的控制器，它有自己的作用域？你是说你需要为每个实例操作info变量吗？@palaѕѕѕ检查plunker和EDIT@user441521请检查编辑为什么希望它打印两次1？在html中有两个类为“source”的元素。最好不要在控制器中操纵DOM。你想做什么样的操作？每个模板都是为用户点击从“源”到“接收者”的div“内容”而设计的。这就是为什么我只想选择每个模板的“源”类，而不是整个文档。否则，它将附加到文档中的每个“receiver”类，以便我完全理解，例如，如果我单击“Carl”，您希望“Carl”div从“source”移动到“receiver”？是的。但仅在模板内。并非所有现有的“接收器”搜索模板都有自己的控制器实例。我将在控制器中制作2个阵列。列出一个sourceList和另一个receiverList。单击content div并将item.name传递给它。在该函数中，您可以从一个列表中删除，然后添加到另一个列表中。然后在你的模板中对receiver类做同样的ng重复。是的，我想这样就可以了！感谢您的时间和帮助：）当用户单击div“content”时，每个模板都是用于从“source”移动到“receiver”的。这就是为什么我只想选择每个模板的“源”类，而不是整个文档。否则，它将附加到文档中的每个“receiver”类，以便我完全理解，例如，如果我单击“Carl”，您希望“Carl”div从“source”移动到“receiver”？是的。但仅在模板内。并非所有现有的“接收器”搜索模板都有自己的控制器实例。我将在控制器中制作2个阵列。列出一个sourceList和另一个receiverList。单击content div并将item.name传递给它。在该函数中，您可以从一个列表中删除，然后添加到另一个列表中。然后在你的模板中对receiver类做同样的ng重复。是的，我想这样就可以了！感谢您的时间和帮助：）