Good evening. It is impossible to make a change in the color and text of the button when pressed. A boolean comes from the server, depending on its value a certain button is displayed.

<tr ng-repeat="employee in allEmployee"> <td> <button style="width:80px;height:35px" ng-click="changeEmployeeStatus(employee)" ng-class="{'btn btn-success' : employee.active, 'btn btn-danger' : !employee.active}" type="button">{{employee.active? 'Active': 'UnActive'}} </button> </td> </tr>

How to make it so that when pressed not only the function changeEmployeeStatus(employee) is changeEmployeeStatus(employee) , but also the color and the label of the button change?

changeEmployeeStatus (employee):

Controller:

 $scope.changeEmployeeStatus = function (employee) { staffManagementService.changeEmployeeStatus(employee.email).success(function (data) { console.log(data); }); };

service:

 service.changeEmployeeStatus = function (email) { console.log(email) http({ method : 'GET', url : '/admin/changeEmployeeStatus', params : {email:email} }).success(function (data, status, headers) { console.log(data); return data; }); };
  • And what does not suit the current decision? - Grundy
  • Now the color and the text will change only after reloading the page (the data from the database will be pulled). And I need them to change immediately when I click. - Aleksei
  • What is changeEmployeeStatus ? give her code. So what is the value of myClass? - Grundy
  • changeEmployeeStatus climbs into the database and changes the value of the status of the specified apploser. Returned boolean. Code added to the first post. And I did not update the button code much, made it more readable. Sorry I did not say right away. - Aleksei
  • But the question of changing the color and text remains open. - Aleksei

1 answer 1

In this case, the view depends on the value of the active field in the employee object, but since it does not change in any of the functions, the display is not updated.

To solve, you must fill this field with the result of the query

 $scope.changeEmployeeStatus = function (employee) { staffManagementService.changeEmployeeStatus(employee.email).success(function (data) { employee.active = data; }); };

In addition, you must add return to the server function to avoid calling undefined in the controller.

 service.changeEmployeeStatus = function (email) { console.log(email) return http({ method : 'GET', url : '/admin/changeEmployeeStatus', params : {email:email} }).success(function (data, status, headers) { console.log(data); return data; }); };
  • Sorry, I'm stupid already. From lunch I sit. Thank you very much !!) Everything works! - Aleksei