如何使用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