0

我只想根据服务器的响应显示下面每个标记和未标记的图标。我已经阅读了一系列相关问题，但似乎都与 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';
        }
4

1 回答 1

0

您需要为每个单独使用一个标志student。studentList您可以通过 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>

于 2019-08-27T20:47:08.720 回答