我只想根据服务器的响应显示下面每个标记和未标记的图标。我已经阅读了一系列相关问题，但似乎都与 ng 类相关，我也尝试应用它们，但它们似乎不起作用，我没有使用 ng-class，我唯一想要的是根据服务器的响应(TRUE 或 FALSE(显示单击的每一行的图标。 我已经达成了一个解决方案，但它在所有.现在的问题是;如何使图标显示为单击的每一行？
//我的网页下面
<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';
}
您需要分别为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>