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

Question

当我单击表上的特定元素（下面带有$scope代码）时，我想检索该元素的信息（在示例代码中为“ apple”）。

当前，我在$scope.studentsObj查找一个元素并将一个onClick附加到所有元素上时遇到了麻烦（这包括由$scope.studentsObj.push函数添加的$scope.studentsObj.push ）。

另外，现在当我使用$scope.studentsObj.push ，它总是转到下一行，如何将元素推到特定的键值？ 例如，当我添加"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

问题1

目前，我在$ scope.studentsObj中查找一个元素并将一个onClick附加到所有元素上时遇到了麻烦（这包括由$ scope.studentsObj.push函数添加的元素）。

在您的范围内创建函数，该函数具有将从单元格传递的参数。

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

然后将ng-click属性添加到单元格，使用所需的参数（对于您的student或value调用函数：

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

问题2

另外，现在当我使用$ scope.studentsObj.push时，它总是转到下一行，如何将元素推到特定的键值？ 例如，当我添加“ first：苹果，last：果汁”，“ first：苹果，last：馅饼”行时，应将其替换为“ first：苹果，last：果汁”。

有很多方法可以实现这一目标。 我将向您展示不变的方式。 这意味着不修改内存中的现有对象，而是创建新版本的新对象。

这通常具有许多优点。 我认为推理起来更容易，并且因为代码更简单而实现。 但是尤其是在Angular中，要确保Angular将看到新版本，因为渲染引擎会检测到对象是否与以前的对象相同，因此不会刷新渲染。 这样总是有新的对象。

您可以通过在数组上map的简单函数来实现：

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

此函数返回新版本的students数组，其中first与name参数匹配的值的student将具有newStudent新字段。 其他学生将只复制原样。

然后，可以通过将其结果存储到相同的作用域变量中，在$scope使用它：

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

看到所有的动作：

 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

问题1

问题2

看到所有的动作：

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

问题描述

1 个解决方案

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

问题1

问题2

看到所有的动作：

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