为什么我的ng-show不能使用<img/>？

时间：2017-06-10 13:18:45

标签： angularjs ng-show angularjs-ng-show

我无法让我的ng-show根据函数的返回显示图像。如果它是真，假或为空，它应该返回不同的图像。

如果你无法解决我的问题，你能否指出我如何做到这一点的正确方向？

如果您只是查看html代码中的语法，我将非常感激，它在chrome调试控制台中抛出了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" : "carol@gmail.com",
    "email" : "carol@gmail.com",
    "name" : "Carol",
    "photo" : null
}, {
    "id" : 48,
    "username" : "c@gmail.com",
    "email" : "c@gmail.com",
    "name" : "Cleberson Charles Colombo Faccin",
    "photo" : null
}, {
    "id" : 22840,
    "username" : "r@email.com",
    "email" : "r@email.com",
    "name" : "Rodrigo",
    "photo" : null
}, {
    "id" : 29020,
    "username" : "c@email.com",
    "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;
}

2 个答案:

答案 0 :(得分：2)

你输错了

<div ng-show="isAttending(student.id,lesson.id)">

这导致角度日志中的错误见最后一行

如果希望img可见<{p>，isAttending函数应该返回true

答案 1 :(得分：2)

如果您看到错误，最后一行显示您的错误。 当你使用像 ng 这样的角度标签时，你不必使用花括号 {{

删除花括号，它应该可以正常工作

相关问题
最新问题