javascript - 选择模板中的 DOM 元素

Question

我在同一页面上多次调用了这个模板:

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

然后我想在每个模板范围内选择所有带有 class="content" 的元素，以便对其进行操作。我如何使用 JS 实现此目的？

编辑:

Plunker

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

Answer 1

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

https://plnkr.co/edit/n5GOd6MDLyvG4ZAsuLvf?p=preview

主要思想是创建 2 个列表并遍历这两个列表，并在点击时在它们之间移动数据。

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;
            }
          });
        }
  }]);