0
我不能讓我的ng顯示基於函數的返回來顯示圖像。如果它是true，false或null，它應該返回一個不同的圖像。爲什麼我的ng-show不能與<img>一起使用？
如果你不能解決我的問題，你可以指出我在正確的方向，如何做到這一點？
如果你可以看一下在html代碼的語法我將非常感激，它拋出25個錯誤的鍍鉻調試控制檯：
Error: [$parse:syntax] http://errors.angularjs.org/1.6.4/$parse/syntax?p0=%7B&p1=invalid%20key&p2=…%3D%3D%20'true'&p4=%7BisAttending(student.id%2Clesson.id)%20%3D%3D%20'true'
at angular.js:38
at s.throwError (angular.js:15090)
at s.object (angular.js:15079)
at s.primary (angular.js:14968)
at s.unary (angular.js:14956)
at s.multiplicative (angular.js:14943)
at s.additive (angular.js:14934)
at s.relational (angular.js:14925)
at s.equality (angular.js:14916)
at s.logicalAND (angular.js:14908) "<div ng-show="{{isAttending(student.id,lesson.id) == 'true'">"
這是isAttending功能，下面的代碼：
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Overpass"
rel="stylesheet">
</head>
<body>
<div ng-app="geisonApp" ng-controller="myCtrl">
<div id="um"
style="margin-left: auto; margin-right: auto; width: 60%; text-decoration: none; font-size: 12px; font-weight: 100;">
<div>
<ul id="dois">
<li><a href="#"> <img
style="padding-left: 0px; padding-top: 16px; margin-top: -29px; margin-left: -25px;"
src="Untitled.png">
</a></li>
<li><a href="#">CURSOS</a></li>
<li><a href="#">CALENDÁRIO</a></li>
<li><a href="#">GRUPOS DE DISCUSSÃO </a></li>
</ul>
</div>
<div style="float: right; margin-top: -71px;">
<p style="position: relative; top: -10px; display: inline">Jaime
Schettini</p>
<img
style="padding-left: 10px; padding-top: 16px; padding-right: 11px;"
src="checked.png"> <img
style="padding-left: 0px; padding-top: 16px; padding-right: 11px;"
src="checked.png">
</div>
</div>
<div
style="background-color: #5cc8ec; width: 100%; color: white; font-weight: bold; font-size: 14px; height: 60px; font-family: arial; margin-top: -10px;">
<span
style="margin-left: 20% !important; margin-top: 25px; position: absolute; margin-left: 10px;">
Matemática 6 Série - Frequência </span>
</div>
<br>
<table style="margin-left: auto; margin-right: auto; width: 60%;">
<tbody>
<tr>
<td
style="width: 40%; border-top: 1px solid white; border-left: 1px solid white;">
<div
style="margin-left: 75%; margin-top: -2px; margin-bottom: -3px;">
<img src="play-button.png"
style="border: 1px solid #ebebeb; padding: 3px; margin-left: 17px;">
<img src="play-button.png"
style="border: 1px solid #ebebeb; padding: 3px; margin-left: -8px;">
</div>
</td>
<td ng-repeat="lesson in lessons">{{lesson.id}}</td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td ng-repeat="lesson in lessons"><img
style="padding-left: 10px; padding-top: 16px; padding-right: 11px; padding-bottom: 10px; padding-bottom: 10px;"
src="unchecked.png"></td>
</tr>
<tr ng-repeat="student in students">
<td><img
style="padding-left: 10px; padding-top: 16px; padding-right: 11px; padding-bottom: 10px; padding-bottom: 10px;"
src="checked.png">
<p class="ng-binding"
style="display: inline; top: -23px; position: relative; font-family: 'Overpass', sans-serif; font-size: 15px; color: grey;">
{{student.name}}</p></td>
<td ng-repeat="lesson in lessons">
<p>{{isAttending(student.id,lesson.id)}}</p>
<div ng-show="{{isAttending(student.id,lesson.id) == 'true'">
<img id="imgChecked" ng-src="checked.png">
</div>
<!-- <img id="imgUnchecked" ng-show="{{isAttending(student.id,lesson.id)}} == 'false'" ng-src="unchecked.png"> -->
<!-- <img id="imgEmpty" ng-show="{{isAttending(student.id,lesson.id)}} == 'null'" ng-src="empty.png"> -->
</td>
</tr>
</tbody>
</table>
</div>
var app = angular.module("geisonApp", []);
app.controller("myCtrl", function($scope) {
$scope.students = [ {
"id" : 15,
"username" : "jaime",
"email" : "jaime",
"name" : "Jaime",
"photo" : null
}, {
"id" : 31,
"username" : "[email protected]",
"email" : "[email protected]",
"name" : "Carol",
"photo" : null
}, {
"id" : 48,
"username" : "[email protected]",
"email" : "[email protected]",
"name" : "Cleberson Charles Colombo Faccin",
"photo" : null
}, {
"id" : 22840,
"username" : "[email protected]ail.com",
"email" : "[email protected]",
"name" : "Rodrigo",
"photo" : null
}, {
"id" : 29020,
"username" : "[email protected]",
"email" : null,
"name" : "Caio",
"photo" : null
} ];
$scope.lessons = [ {
"id" : 59,
"startDate" : 1456826400000,
"endDate" : 1456830000000
}, {
"id" : 60,
"startDate" : 1456999200000,
"endDate" : 1457002800000
}, {
"id" : 61,
"startDate" : 1457431200000,
"endDate" : 1457434800000
}, {
"id" : 62,
"startDate" : 1457604000000,
"endDate" : 1457607600000
}, {
"id" : 63,
"startDate" : 1458036000000,
"endDate" : 1458039600000
} ];
$scope.attendances = [ {
"id" : 6,
"lesson" : {
"id" : 58
},
"present" : true,
"user" : {
"id" : 15
}
}, {
"id" : 819368,
"lesson" : {
"id" : 59
},
"present" : true,
"user" : {
"id" : 15
}
}, {
"id" : 819367,
"lesson" : {
"id" : 59
},
"present" : true,
"user" : {
"id" : 48
}
}, {
"id" : 967272,
"lesson" : {
"id" : 62
},
"present" : null,
"user" : {
"id" : 15
}
}, {
"id" : 967273,
"lesson" : {
"id" : 62
},
"present" : null,
"user" : {
"id" : 31
}
}, {
"id" : 967274,
"lesson" : {
"id" : 62
},
"present" : null,
"user" : {
"id" : 48
}
}, {
"id" : 967275,
"lesson" : {
"id" : 62
},
"present" : false,
"user" : {
"id" : 22840
}
}, {
"id" : 967276,
"lesson" : {
"id" : 62
},
"present" : null,
"user" : {
"id" : 29020
}
}, {
"id" : 4,
"lesson" : {
"id" : 63
},
"present" : true,
"user" : {
"id" : 15
}
}, {
"id" : 5,
"lesson" : {
"id" : 64
},
"present" : false,
"user" : {
"id" : 15
}
}, {
"id" : 16,
"lesson" : {
"id" : 65
},
"present" : true,
"user" : {
"id" : 15
}
}, {
"id" : 17,
"lesson" : {
"id" : 66
},
"present" : false,
"user" : {
"id" : 15
}
}, {
"id" : 967232,
"lesson" : {
"id" : 66
},
"present" : true,
"user" : {
"id" : 29020
}
}, {
"id" : 664012,
"lesson" : {
"id" : 67
},
"present" : true,
"user" : {
"id" : 15
}
}, {
"id" : 664013,
"lesson" : {
"id" : 67
},
"present" : true,
"user" : {
"id" : 31
}
}, {
"id" : 664014,
"lesson" : {
"id" : 67
},
"present" : true,
"user" : {
"id" : 48
}
}, {
"id" : 664015,
"lesson" : {
"id" : 67
},
"present" : true,
"user" : {
"id" : 22840
}
}, {
"id" : 664016,
"lesson" : {
"id" : 67
},
"present" : true,
"user" : {
"id" : 29020
}
}, {
"id" : 664007,
"lesson" : {
"id" : 68
},
"present" : false,
"user" : {
"id" : 15
}
}, {
"id" : 664008,
"lesson" : {
"id" : 68
},
"present" : false,
"user" : {
"id" : 31
}
}, {
"id" : 664009,
"lesson" : {
"id" : 68
},
"present" : false,
"user" : {
"id" : 48
}
}, {
"id" : 664010,
"lesson" : {
"id" : 68
},
"present" : false,
"user" : {
"id" : 22840
}
}, {
"id" : 664011,
"lesson" : {
"id" : 68
},
"present" : false,
"user" : {
"id" : 29020
}
}, {
"id" : 305303,
"lesson" : {
"id" : 90
},
"present" : false,
"user" : {
"id" : 15
}
}, {
"id" : 305302,
"lesson" : {
"id" : 90
},
"present" : false,
"user" : {
"id" : 31
}
}, {
"id" : 305306,
"lesson" : {
"id" : 90
},
"present" : false,
"user" : {
"id" : 22840
}
}, {
"id" : 305307,
"lesson" : {
"id" : 90
},
"present" : false,
"user" : {
"id" : 29020
}
} ];
$scope.isAttending = function(studentId, lessonId) {
var coisa;
$scope.attendances.forEach(function(arrayItem){
if(arrayItem.lesson.id === lessonId){
if(arrayItem.user.id === studentId){
// console.log(arrayItem.user.id + "-" + arrayItem.lesson.id +" = " + arrayItem.present);
coisa = arrayItem.present;
}
}
});
return coisa;
// return studentId + "-" + lessonId;
}
});
CSS：
body {
margin:0;
}
div#um{
background-color: white;
}
ul#dois {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
margin-top: 8px;
}
li a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
table, th, td{
border: 1px solid #ebebeb;
}
table{
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
img#imgUnchecked, #imgChecked{
padding-left: 10px; padding-top: 16px; padding-right: 11px;
}