如何使用AngularJS范围将onClick事件附加到元素表？

Question

When I click a specific element on the table (code with $scope below), I want to retrieve the information of that element (say "apple" in the example code). 当我单击表上的特定元素（下面带有$scope代码）时，我想检索该元素的信息（在示例代码中为“ apple”）。

Currently, I'm having trouble search up an element in the $scope.studentsObj and attach an onClick to all of them (this includes the one being added by the $scope.studentsObj.push function.) 当前，我在$scope.studentsObj查找一个元素并将一个onClick附加到所有元素上时遇到了麻烦（这包括由$scope.studentsObj.push函数添加的$scope.studentsObj.push ）。

Also, right now when I use $scope.studentsObj.push , it always goes to the next row, how do I push element to specific key value? 另外，现在当我使用$scope.studentsObj.push ，它总是转到下一行，如何将元素推到特定的键值？ For example, when I add "first: apple, last: juice" , "first: apple, last: pie" row, it should be replaced by "first: apple, last: juice" . 例如，当我添加"first: apple, last: juice" , "first: apple, last: pie"行时，应将其替换为"first: apple, last: juice" 。

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
<body>    
  <div ng-app="myApp" ng-controller="myController">
  <h1>Table of Names/h1>
  <table> 
    <th> <h2>First Name</h2></th> <th> <h2>Last Name</h2></th>
    <tr ng-repeat="student in studentsObj"> 
      <td ng-repeat="(key, value) in student"> {{value}} </td>
    </tr> 
  </table>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
      $scope.studentsObj = 
       [ {first: "apple", last: "pie"},
         {first: "dance", last: "marathon"},
         {first: "tom", last: "boy"}],
         $scope.studentsObj.push({first:"karen"}),
         $scope.studentsObj.push({first:,last:"smith"});
    });
  </script>
</body>
</html>

Answer 1

Question #1 问题1

Currently, I'm having trouble search up an element in the $scope.studentsObj and attach an onClick to all of them(this includes the one being added by the $scope.studentsObj.push function.) 目前，我在$ scope.studentsObj中查找一个元素并将一个onClick附加到所有元素上时遇到了麻烦（这包括由$ scope.studentsObj.push函数添加的元素）。

Create function in your scope that will have parameter that you will pass from the cell. 在您的范围内创建函数，该函数具有将从单元格传递的参数。

$scope.cellClicked = (value) => {
  alert(value)
}

Then add ng-click attribute to the cell, calling the function with parameter you want, in your case student or value : 然后将ng-click属性添加到单元格，使用所需的参数（对于您的student或value调用函数：

<td ng-repeat="(key, value) in student" ng-click='cellClicked(value)'> {{value}} </td>

Question #2 问题2

Also, right now when I use $scope.studentsObj.push, it always goes to the next row, how do I push element to specific key value? 另外，现在当我使用$ scope.studentsObj.push时，它总是转到下一行，如何将元素推到特定的键值？ For example, when I add "first: apple, last: juice" , "first: apple, last: pie" row, it should be replaced by "first: apple, last: juice". 例如，当我添加“ first：苹果，last：果汁”，“ first：苹果，last：馅饼”行时，应将其替换为“ first：苹果，last：果汁”。

There is many ways how to achieve this. 有很多方法可以实现这一目标。 I will show you not-mutating way. 我将向您展示不变的方式。 It means not modifying the existing object in memory, but rathe creating new object of new version. 这意味着不修改内存中的现有对象，而是创建新版本的新对象。

This has often many advantages. 这通常具有许多优点。 It is I think easier to reason and also implement as the code is simpler. 我认为推理起来更容易，并且因为代码更简单而实现。 But especially in Angular it make sure that Angular will see the new version, because the rendering engine detects if object is the same as previous it doesn't refresh the rendering. 但是尤其是在Angular中，要确保Angular将看到新版本，因为渲染引擎会检测到对象是否与以前的对象相同，因此不会刷新渲染。 This way there is always new object. 这样总是有新的对象。

You can do it by simple function with map over the array: 您可以通过在数组上map的简单函数来实现：

var updateStudentByFirst = (students, name, newStudent) =>
  students.map(student => 
    student.first == name ? 
    Object.assign({}, student, newStudent) : 
    student)

This function returns new version of students array where student that matches first value with name parameter will have new fields from newStudent . 此函数返回新版本的students数组，其中first与name参数匹配的值的student将具有newStudent新字段。 Other students will by just copied over intact. 其他学生将只复制原样。

You can use it then in your $scope by storing result of it to the same scope variable: 然后，可以通过将其结果存储到相同的作用域变量中，在$scope使用它：

$scope.studentsObj = updateStudentByFirst(
  $scope.studentsObj, "dance", {last: "competition"})

See it all in action: 看到所有的动作：

 var updateStudentByFirst = (students, name, newStudent) => students.map(student => student.first == name ? Object.assign({}, student, newStudent) : student) var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.cellClicked = (value) => { alert(value) // update students to new studence where "dance" has surname "competition" $scope.studentsObj = updateStudentByFirst($scope.studentsObj, "dance", {last: "competition"}) } $scope.studentsObj = [{ first: "apple", last: "pie" }, { first: "dance", last: "marathon" }, { first: "tom", last: "boy" } ] });

 table, th, td { border: 1px solid black; }

 <div ng-app="myApp" ng-controller="myController"> <h1>Table of Names</h1> <table> <tr> <th> <h2>First Name</h2> </th> <th> <h2>Last Name</h2> </th> </tr> <tr ng-repeat="student in studentsObj"> <td ng-repeat="(key, value) in student" ng-click='cellClicked(value)'> {{value}} </td> </tr> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

如何使用AngularJS范围将onClick事件附加到元素表？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-05-01 14:52:15

Question #1 问题1

Question #2 问题2

See it all in action: 看到所有的动作：

如何使用AngularJS范围将onClick事件附加到元素表？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-05-01 14:52:15

Question #1 问题1

Question #2 问题2

See it all in action: 看到所有的动作：

解决方案1
2 已采纳 2017-05-01 14:52:15