0

I Have a table made from a Web Service JSON, on every row there is a button to mark the line to delete. When you click on the row button a JS alert show up the id of the row element, I need also add the 'danger' bootstrap class on the row. Now I can see the row element id when click the button and add the id to a a list for later send it to the web service.

This is my view:

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

The controller:

$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';
                }

I've been trying to do it using ngClass and following other examples and I'm getting nothing not even the JS alert and nothing shown on the JS console.

Edit:

I put the full controller code:

// 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 () {

                    }

                });

Solved:

Your current code tries to use the parent scope, which is why it's not working as you expected. You can simply pass in the scope to the alert function. So

$scope.alert = function (index, rowScope) {
  ...
  rowScope.class = 'danger';
}

with your template as

...
   <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/

1

1 Answer 1

1

Your current code tries to use the parent scope, which is why it's not working as you expected. You can simply pass in the scope to the alert function. So

$scope.alert = function (index, rowScope) {
  ...
  rowScope.class = 'danger';
}

with your template as

...
   <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/


That said, the right way would be to have something on your value object which indicates that it is deleted. Then use that to drive the ng-class. That way you don't have view properties (i.e. class) in your controller.

6
  • I did it but I'm getting this error on console: 'Cannot set property 'class' of undefined'
    – jcobo1
    Mar 23, 2016 at 12:28
  • can you paste your HTML and script into my fiddle, fork it and post the link? Mar 23, 2016 at 12:33
  • I changed: jsfiddle.net/hqu4th4z But don't know why on jsfiddle works but not on my server
    – jcobo1
    Mar 23, 2016 at 12:37
  • I posted the full controller
    – jcobo1
    Mar 23, 2016 at 12:39
  • in the fiddle you posted you are using addClass in the controller and class in the template. Mar 23, 2016 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.