How to show a element for each rows clicked in angularjs

Question

I just want to make the marked and unmarked icon of each below appear based on the response from the server. I've read series of relevant questions but all seems to be ng-class related, I tried to apply them too but they seem not to be working, I'm not using ng-class, the only thing I want is to make the icons of each rows clicked to show based on the response from the server (TRUE or FALSE). I've reached a solution but it's toggling between all the . The question now is; how do I make the icons appear for every rows clicked?

//my html below

<tr ng-repeat="x in studentList">
    <td>{{x.firstname}}</td>
    <td>{{x.lastname}}</td>
    <td>{{x.firstname}}</td>
    <td>
        <button ng-click="markAttendance($index, x.id)">+</button>
        <button ng-click="unmarkAttendance($index, x.id)">-</button>
        <span ng-show="feedback === 'MARKED'">"marked icon"</span>
        <span ng-show="feedback === 'UNMARKED'">"unmarked icon"</span>
    </td>
</tr>

//my angularjs code below

$scope.markAttendance = function(index, id){
    $http({
        method: 'POST',
        url: 'markattendance.php',
        data: { studentId : id }
    }).then(function (response) {
        if(response.data === 'TRUE'){
           $scope.feedback = 'MARKED';
        } else {
            $scope.feedback = 'FALSE';
        }

You're using a single, global $scope.feedback flag in order to tell that row x should be marked and row y shouldn't. That can't work. The flag must be a property of each student in the list: if the student is flagged you show an icon, if it isn't, you show the other icon. — JB Nizet, Aug 27 '19 at 16:27
You mean it must be a property of each student directly from the server? — Olawale Oladiran, Aug 27 '19 at 16:35
No. I mean that it makes no sense to use a single flag to decide if one student should be flagegd and one other student shouldn't. And that each student must have its own flag, telling if the student is flagged or not. Whether that flag comes from the server or not is irrelevant. — JB Nizet, Aug 27 '19 at 16:37

score 0 · Accepted Answer · answered Aug 27 '19 at 20:47

You need to use a flag for each student in studentList separately. You can track them by id.

Here is a working example.

angular.module('app', [])
  .controller('Ctrl', ['$scope', ($scope) => {
    $scope.studentList = [{
      id: 1,
      firstname: 'John',
      lastname: 'Doe',
      feedback: 'UNMARKED'
    }, {
      id: 2,
      firstname: 'Jane',
      lastname: 'Doe',
      feedback: 'UNMARKED'
    }];

    $scope.markAttendance = (id) => {
      $scope.studentList.find(x => x.id === id).feedback = 'MARKED';
    };

    $scope.unmarkAttendance = (id) => {
      $scope.studentList.find(x => x.id === id).feedback = 'UNMARKED';
    };
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app" ng-controller="Ctrl">

  <table>
    <tr ng-repeat="x in studentList">
      <td>{{x.firstname}}</td>
      <td>{{x.lastname}}</td>
      <td>
        <button ng-click="markAttendance(x.id)">+</button>
        <button ng-click="unmarkAttendance(x.id)">-</button>
        <span ng-show="x.feedback === 'MARKED'">"marked icon"</span>
        <span ng-show="x.feedback === 'UNMARKED'">"unmarked icon"</span>
      </td>
    </tr>
  </table>
</body>

How to show a element for each rows clicked in angularjs

1 Answers1