问题＃1

Question

当我点击表格中的特定元素（下面带有$scope的代码）时，我想要检索该元素的信息（例如＆＃34; apple＆＃34;在示例代码中）。

目前，我在查找$scope.studentsObj中的元素时遇到问题，并将onClick附加到所有元素（包括由$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：apple，last：juice”，“first：apple，last：pie”行时，应将其替换为“first：apple，last：juice”。

如何实现这一目标有很多方法。我会告诉你不要变异的方式。它意味着不修改内存中的现有对象，而是创建新版本的新对象。

这通常有很多优点。我认为更容易推理并实现，因为代码更简单。但特别是在Angular中，它确保Angular会看到新版本，因为渲染引擎会检测对象是否与之前不刷新渲染的对象相同。这样总会有新的对象。

你可以通过简单的函数map来完成数组：

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

此函数返回students数组的新版本，其中匹配first值与name参数的学生将拥有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

查看全部动态：