テーブルの特定の要素（下の$scopeのコード）をクリックすると、その要素の情報を取得したいとします（例のコードでは「apple」）。AngularJSスコープを使用してonClickイベントを要素のテーブルに添付するにはどうすればよいですか？

現在は、私が$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（） 'のどこかに設定して、コントローラの' $ scope'オブジェクトに 'addStudent'関数を追加してください。 – devqon

質問＃1

現在、私はトラブル$ scope.studentsObj内の要素を検索し、それらのすべてにのonClickを添付を抱えている（これはによって追加されたものを含み$ scope.studentsObj.push関数）

セルから渡すパラメータを持つスコープ内に関数を作成します。

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

その後、あなたの場合studentやvalueに、あなたがしたいパラメータを指定して関数を呼び出し、セルにng-click属性を追加します。

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

今質問＃2も

、 $ scope.studentsObj.pushを使用すると、常に次の行に移動します。要素を特定のキー値にプッシュするにはどうすればよいですか？たとえば、「最初の：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)

この関数はnameパラメータでfirst値と一致した生徒がnewStudentから新しいフィールドを持つことになりますstudents配列の新しいバージョンを返します。他の生徒はそのままコピーされます。

あなたは同じスコープの変数に結果を格納することによって、あなたの$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

特定のインデックスで要素をテーブルにプッシュしますか？私が姓の値の競争で踊るために押してほしいと言うのように –

あなたはそれをすることによって実際に達成したいことをもう少し説明できますか？元のリストに直接「競争」を置くだけではどういうことではないでしょうか？ –

はい、私は{ダンス、競争}を入れます。姓の欄のマラソンを置き換える必要があります。ダンスマラソンの行全体がダンスになる|競争 –

AngularJSスコープを使用してonClickイベントを要素のテーブルに添付するにはどうすればよいですか？

答えて

質問＃1

今質問＃2も

はアクションでそれをすべてを参照してください：

関連する問題