关于Angular的表,添加具有ngClass和ng-reeat的类
Table on Angular, adding classes with ngClass and ng-repeat
I有一个由Web服务JSON制成的表,每行都有一个按钮来标记要删除的行。当你点击行按钮时,JS警报会显示行元素的id,我还需要在行上添加"危险"引导类。现在,我可以在单击按钮时看到行元素id,并将id添加到列表中,以便稍后将其发送到web服务。
这是我的观点:
<table class="table table-condensed">
<tr>
<th>#</th>
<th><a href="" ng-click="sortField = 'ordre'; reverse = !reverse">Prioritat</a></th>
<th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Atribut</a></th>
<th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Tipus</a></th>
<th><a href="" ng-click="sortField = 'midaAtribut'; reverse = !reverse">Mida</a></th>
<th><a href="" ng-click="sortField = 'atributObligatori'; reverse = !reverse">Obligatori</a></th>
<th><a href="" ng-click="sortField = 'observacions'; reverse = !reverse">Observacions</a></th>
</tr>
<tr ng-repeat="(key, value) in atrb">
<td>
<a href="" ng-click="alert(value.idatributs_actiu)" ng-model="elimina"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
<td>
<input type="number" ng-model="value.ordre" value="value.ordre" />
</td>
<td>
<input type="value.valor" ng-model="value.nomAtribut" value="value.nomAtribut" />
</td>
<td>
{{value.valor}}
</td>
<td>
<input type="value.valor" ng-model="value.midaAtribut" value="value.midaAtribut" />
</td>
<td>
<input type="checkbox" ng-model="value.atributObligatori" value="value.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" />
</td>
<td>
<input type="value.valor" ng-model="value.observacions" value="value.observacions" />
</td>
</tr>
控制器:
$scope.alert = function (index) {
$window.alert('click a borrar id: ' + index); // Show JS alert with id
$scope.addAtributsExistentsEliminar(index); // Add id to array, for later send it to WS
$scope.elimina = true;
$scope.class = 'danger';
}
我一直在尝试使用ngClass和以下其他示例来实现这一点,但我一无所获,甚至连JS警报都没有,JS控制台上也没有显示任何内容。
编辑:
我把完整的控制器代码:
// Edita tipus d'actius
assets.controller('EditaTipusCtrl', function ($scope, $http, $routeParams, $window) {
$scope.refresh = function () {
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/' + $routeParams.id).success(function (data) {
$scope.atrb = data;
});
};
$scope.alert = function (index, rowScope) {
// rowScope.class = 'danger';
$window.alert('click a borrar id: ' + index); // Show JS alert with id
$scope.addAtributsExistentsEliminar(index); // Add id to array, for later send it to WS
$scope.elimina = true;
rowScope.addClass = 'danger';
}
$scope.refresh();
// Construeix combo per definir tipus atributs (String, Date, Text)
$http.get('http://10.0.203.73/WS/ws.php/getCombo/1').success(function (data) {
$scope.options = data;
});
$scope.nousAtributs = [];
$scope.atributsExistentsEliminar = [];
$scope.addNewLine = function () {
var newRow = {
"nomAtribut": "",
"tipus": "",
"mida": '',
"prioritat": "",
"obligatori": "",
"observacions": "",
"nomTipusActiu": $routeParams.id // nom del tipus d'actiu
};
$scope.nousAtributs.push(newRow);
}
$scope.addAtributsExistentsEliminar = function (id) {
$scope.atributsExistentsEliminar.push(id);
}
$scope.showAtributsEliminar = function(){
angular.forEach($scope.atributsExistentsEliminar, $scope.show);
}
$scope.show = function (id) {
$http.get('http://10.0.203.73/WS/ws.php/tipusactius/edita/elimina/' + id + '.json').success(function (data) {
$scope.sts = data.status;
$window.alert($scope.sts);
});
if ($scope.sts.status == 'IN_USE') {
$window.alert('Aquest atribut no es pot eliminar perque és en ús');
}
}
$scope.saveChanges=function(){
angular.forEach($scope.atrb, $scope.sendChanges);
angular.forEach($scope.nousAtributs, $scope.saveNewAttributtes);
$('#myModal').modal('show');
$scope.refresh();
}
$scope.sendChanges=function(atribut){
$http.post('http://10.0.203.73/WS/ws.php/tipusactius/edita', atribut).success(function (data) {
$scope.atrb = data;
});
}
$scope.saveNewAttributtes=function(atribut){
$http.post('http://10.0.203.73/WS/ws.php/tipusactius/edita/nouatribut', atribut).success(function (data){
$scope.atrb = data;
});
}
$scope.removables = function () {
}
});
已解决:
您当前的代码试图使用父作用域,这就是为什么它没有正如你所期望的那样工作。您可以简单地将范围传递给警报作用所以
$scope.alert = function (index, rowScope) { ... rowScope.class = 'danger'; }
使用您的模板作为
... <tr ng-repeat="(key, value) in atrb" ng-class="class"> <td> <a href="" ng-click="alert(value.idatributs_actiu, this)"...
Fiddle-https://jsfiddle.net/y0rtLhyj/
您当前的代码试图使用父作用域,这就是为什么它不能像您预期的那样工作。您可以简单地将作用域传递给alert
函数。所以
$scope.alert = function (index, rowScope) {
...
rowScope.class = 'danger';
}
使用您的模板作为
...
<tr ng-repeat="(key, value) in atrb" ng-class="class">
<td>
<a href="" ng-click="alert(value.idatributs_actiu, this)"...
Fiddle-https://jsfiddle.net/y0rtLhyj/
也就是说,正确的方法是在value
对象上有一些指示它已被删除的内容。然后用它来驱动ng-class
。这样,您的控制器中就没有视图属性(即class
)。
相关文章:
- ng映射方向备选方案
- AngularJS UI路由器不能像ng路由器那样工作
- 角度:在ng重复上切换图像
- 正在使用$location.path(.)路由ng视图
- AngularJS:ng之后,重复$scope值未按预期更新
- ng打开空字符串
- 我应该使用Ng提交还是点击表格
- ng init中的表达式无法使用ng repeat
- 如何在ng-reeat中使用ng-switch来编辑JSON API数据
- AngularJS:在ng-reeat中从php输出数组(带键)
- Angular-使用条件$odd/$even以及ngClass的ng重复属性
- 关于Angular的表,添加具有ngClass和ng-reeat的类
- ng-reeat中的Angular js条件类
- 如何在ng-if中传递ng-reeat变量
- Angularjs表头不断重复(使用ng-reeat)
- 这是ng-reeat和ngInclude的错误吗
- 删除动态添加到ng-reeat(angularjs)的值
- ng-reeat中的角度过滤器——当没有匹配结果时显示消息
- 使用ng-reeat和openweathermapapi搜索和重复城市
- 如何使用ng-reeat和angular ui bootstrap创建分页