Question

我有一个对象数组......对于一个具体的例子，让我们调用数组People，其中每个person都有一个uniqueID，一个name和一个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中））？

Answer 1

尝试在父控制器和$scope.clickHandler上定义ng-click="clickHandler(person)"，这将使用父作用域，而不需要为每行实例化一个控制器

Answer 2

每当你使用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);    
  }
}

这个范围将使人变量。现在，你也可以在这里声明一个clickHandler。

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

Answer 3

您可以直接将$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>

如何将数据从模型带回控制器

3 个答案: