Question

我对如何使用angular.js从表中查找行/列索引有疑问。我在下面解释一个例子。

假设我有一张包含下面给出的数据的表格。

sl no    name     roll-no1   roll-no2     roll-no3  action

1         jack     3           5             7       Change

2         Rahul     4          7              9      change

以及下表中的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="table">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<script src="angularjs.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>

<body>
<div ng-controller="appController">
<table>
<thead>
<tr>
<th>Sl. No</th>
<th> Name</th>
<th>roll-no1</th>
<th>roll-no2</th>
<th>roll-no3 </th>
<th>Action</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="role in userHomeRoleValue">
<td class="role">{{$index+1}}</td>
<td class="role">{{role.user_name}}</td>
<td class="role">{{role.roll1}}</td>
<td class="role">{{role.roll2}}</td>
<td class="role">{{role.roll3}}</td>
<td><button type="button" id="btn" ng-click="changeRow($index)">Change</button></td>
</tr>   
</tbody>
</table>
</div>
</body>
</html>

在控制器文件中，我有以下代码行。

   var app=angular.module('table',[]);
app.controller('appController',function($scope,$http){
    $scope.userHomeRoleValue=[
{'user_name':"jack",'roll1':3,'roll2':5,'roll3':7},
{'user_name':"rahul",'roll1':4,'roll2':7,'roll3':9}
]
console.log('user',$scope.userHomeRoleValue);
$scope.changeRow = function(index) {
var rowData = $scope.userHomeRoleValue[index];
// Do whatever you want to change here because the rowData is the row the user clicked the change button on!
}
});
app.directive("test", function() {
    return {
        scope: false,
        link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                angular.forEach(elem.siblings(), function(value, key) {
                    if (value.hasClass('role')) {
                        angular.element(value).text(elem.text());
                    }
                });
            });
        }
    }
});

这些表值将使用ng-repeat显示，值将在控制器文件中动态分配。在操作列中，我们可以说change是按钮名称。当用户点击第一个更改按钮时我需要在row-no1下的值索引将被获取，该值将使用同一行的roll-no2和roll-no3值更新。假设所有表头也是动态设置的。请帮助我。

Answer 1

在更改按钮上设置ng-click="changeRow($index)"。在您的控制器中添加以下代码：

$scope.changeRow = function(index) {
var rowData = $scope.userHomeRoleValue[index];
// Do whatever you want to change here because the rowData is the row the user clicked the change button on!
}

<强>更新对于您在评论中想要的更改，制定一个指令并将指令设置为所有＆＃34; rol-no＆＃34;元素并添加一个类来跟踪它们。

<td class="role">{{role.roll1}}</td>
<td class="role">{{role.roll2}}</td>
<td class="role">{{role.roll3}}</td>

app.directive("test", function() {
    return {
        scope: false,
        link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                angular.forEach(elem.siblings(), function(value, key) {
                    if (angular.element(value).hasClass('role')) {
                        angular.element(value).text(elem.text());
                    }
                });
            });
        }
    }
});

如何从表中选择列索引并使用angular.js动态设置值

1 个答案: