[英]Delete a row from a table using AngularJS
I want to delete a row from a table in AngularJS. 我想从AngularJS中的表中删除一行。 Data in the table coming from api.json file.
表中的数据来自api.json文件。 If i click on checkbox and then Delete button, it should be deleted.
如果我单击复选框,然后单击“删除”按钮,则应将其删除。 Also, i want to restrict the selection.
另外,我想限制选择。 Suppose, if i click on checkbox in first row, then it will be unchecked if i click in any other row.
假设,如果我单击第一行中的复选框,那么如果我单击任何其他行,则将未选中该复选框。 So, one time, only one row should be selected.
因此,一次只能选择一行。 This is the plnkr link :-
这是plnkr链接:-
http://plnkr.co/edit/UzvucP5T9ijpIP4iDLrt?p=preview http://plnkr.co/edit/UzvucP5T9ijpIP4iDLrt?p=preview
This is the html structure, I am not sure where to place the checkbox. 这是html结构,我不确定该复选框的放置位置。
<div ng-app="MyApp" ng-controller="displayController">
<table style="width:100%" >
<tr ng-repeat="data in datas">
<td>
<input type="checkbox" ng-model="data.clicked">
</td>
<td>{{ data.venture }}</td>
<td>{{ data.message }}</td>
</tr>
</table>
</div>
<button ng-click="delete()">DELETE</button>
<button ng-click="delete()">DELETE</button>
is out of scope of controller Consider moving button
inside div
as it will fall under controller
<button ng-click="delete()">DELETE</button>
不在控制器的范围内考虑将button
移到div
,因为它将落在controller
之下
Your code should look something like this 您的代码应如下所示
<div ng-app="MyApp" ng-controller="displayController">
<table style="width:100%" >
<tr ng-repeat="data in datas">
<td>
<input type="checkbox" ng-model="data.clicked">
</td>
<td>{{ data.venture }}</td>
<td>{{ data.message }}</td>
</tr>
</table>
<button ng-click="delete()">DELETE</button>
</div>
To have only one checkbox, you can follow following steps 要只有一个复选框,可以按照以下步骤操作
change your html to 将您的html更改为
<tr ng-repeat="(key, data) in datas">
<td>
<input type="checkbox" ng-model="data.clicked" ng-change="changed(key)">
</td>
<td>{{ data.venture }}</td>
<td>{{ data.message }}</td>
</tr>
and add changed function as 并添加更改的功能为
$scope.changed = function (changedKey) {
angular.forEach($scope.datas, function(val, key){
if(changedKey !== key){
$scope.datas[key].clicked =false;
}
})
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.