如何为在 angularjs 中单击的每一行显示一个 <span> 元素

Question

我只是想根据服务器的响应使下面每个标记和未标记的图标出现。我已经阅读了一系列相关问题，但似乎都与 ng-class 相关，我也尝试应用它们但它们似乎不起作用，我没有使用 ng-class，我唯一想要的是根据服务器的响应（TRUE 或 FALSE）使点击显示的每一行的图标。我已经找到了解决方案，但它在所有 .现在的问题是；如何让点击的每一行都显示图标？

//我下面的html

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

//我的angularjs代码如下

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

Answer 1

您需要为 studentList 中的每个 student 分别使用一个标志。您可以通过 id 跟踪它们。

这是一个工作示例。

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>

如何为在 angularjs 中单击的每一行显示一个 <span> 元素

How to show a <span> element for each rows clicked in angularjs

angularjs

ng-show

angularjs-ng-show

angularjs-ng-if