My table is generated from a Web Service JSON, each row has a button to mark it for deletion. When you click the button, a JS alert displays the ID of the row element, and I also need to add the 'danger' bootstrap class to the row. Now, I can capture the row element ID when clicking the button and store it in a list to be sent to the web service later.
This is how my view looks:
<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>
Here's the controller:
$scope.alert = function (index) {
$window.alert('click a borrar id: ' + index);
$scope.addAtributsExistentsEliminar(index);
$scope.elimina = true;
$scope.class = 'danger';
}
I've attempted to implement this using ngClass with reference to other examples, but I'm not seeing any output, not even the JavaScript alerts or console messages.
Edit:
Below is the complete controller code:
// Edits asset types
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);
$scope.addAtributsExistentsEliminar(index);
$scope.elimina = true;
rowScope.addClass = 'danger';
}
$scope.refresh();
$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
};
$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 like so
$scope.alert = function (index, rowScope) { ... rowScope.class = 'danger'; }
with your template looking like
... <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/