关于Angular的表,添加具有ngClass和ng-reeat的类

Table on Angular, adding classes with ngClass and ng-repeat

本文关键字:ngClass ng-reeat 的类 Angular 的表 添加 关于      更新时间:2023-09-26

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)。