2

我有一个对象数组...举个具体的例子，让我们调用数组People，其中每个对象person都有 a uniqueID、 aname和 a tagline。

我正在使用 foreach 模板来显示这些人的列表，如下所示：

<ul>
    <li ng-repeat="person in People">
        {{person.name}}: {{person.tagline}}
        ...

很简单，可以从控制器中获取数据并将其同步到模型中。

现在，我想点击一个人并对他们的信息做一些复杂的事情。像这样：

<ul ng-controller="myCtrl">
    <li ng-repeat="person in People" ng-click="clickHandler($event)">
        ...

现在，我可以像这样访问 DOM 元素：

$scope.clickHandler = function($event) {
    var domElement = $event.currentTarget;
        ...

但是，我如何从相关person对象（被点击的对象）中获取数据，以便我可以查看它们uniqueID（未存储在 DOM 中）？

4

3 回答 3

6

尝试$scope.clickHandler在父控制器上定义ng-click="clickHandler(person)"，这样您将使用父范围，并且不需要为每一行实例化一个控制器

于 2012-08-16T14:59:38.647 回答
3

每当您使用 ng-repeat 时，您应该记住它会创建一个新范围。此范围继承自父范围。但是对于 ng-repeat 中的每个项目，都会创建一个新范围。

为了访问这个范围，您还必须引入一个与该范围一起工作的控制器。所以你必须做

 <li ng-repeat="person in People" ng-click="clickHandler($event)" ng-controller="PersonController">
 ...

在你的 javascript

function PersonController($scope){
  //In here you will be able to access the person from "person in People"

  $scope.clickHandler = function($event){
    console.log($scope.person);    
  }
}

正是这个范围将具有 person 变量。现在，您还可以在此处声明一个 clickHandler。

您应该注意，将为 People 中的每个人创建一个新范围以及一个新控制器（PersonController）。在你的人控制器中，你将能够访问和操纵你的人，让你心满意足。

于 2012-08-16T14:47:36.307 回答
0

$event您可以直接将对象传递给函数，而不是传递person，然后您可以在那里执行任何复杂的操作。例如

 <li ng-repeat="person in People" ng-click="clickHandler(person)">
           Name: {{person.name}}, Tagline: {{person.tagline}},  Id:  {{person.uniqueId}}
  </li>

工作示例： 

var myApp = angular.module("myApp", []);

(function() {
    "use strict";
    myApp.controller("myCtrl", function($scope) {
        $scope.People = [{
                "name": "Sam",
                "tagline": "Sam Test",
                "uniqueId": 123

            },
            {
                "name": "Dominik",
                "tagline": "Dominik Test",
                "uniqueId": 100

            },
            {
                "name": "Chris",
                "tagline": "Chris Test",
                "uniqueId": 555

            }
        ];

        $scope.clickHandler = function(person) {
            console.log(person);
            // You can perform any complex operation here as you have access to person here. 
        }
    });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl as ctrl">
   <li ng-repeat="person in People" ng-click="clickHandler(person)">
       Name: {{person.name}}, Tagline: {{person.tagline}},  Id:  {{person.uniqueId}}
     </li>
  </div>
</div>

于 2020-04-30T06:00:59.317 回答