當我點擊表格上的特定元素（代碼爲$scope）時，我想檢索該元素的信息（在示例代碼中稱爲「apple」）。如何將onClick事件附加到使用AngularJS作用域的元素表中？

目前，我無法在$scope.studentsObj搜索了一個元素並附加onClick到所有的人（這包括由$scope.studentsObj.push功能被添加了一個。）

而且，現在當我使用$scope.studentsObj.push，它總是進入下一行，我如何將元素推送到特定的鍵值？例如，當我添加行時，應將其替換爲"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>

來源

2017-05-01 Taylor Hearn

你可以只需設置某處'ng-click =「addStudent（）'並在控制器 – devqon

問題＃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」row時，它應該被替換爲「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>

來源

2017-05-01 14:52:15

中的'$ scope'對象中添加一個'addStudent'函數，但是如何我是否將元素推送到特定索引處的表格？比如說我想推動與姓氏價值競爭跳舞 –

你能更多地解釋一下你想通過這樣做實際達到什麼嗎？不太清楚爲什麼不直接將「競爭」放在原始列表中？ –

是的，當我把{舞蹈，競爭}。它應該取代姓氏列中的馬拉松。整排跳舞馬拉松將成爲舞蹈比賽 –

如何將onClick事件附加到使用AngularJS作用域的元素表中？

回答

問題＃1

問題2

看到這一切在行動：

相關問題