【问题标题】:HTML Mustache notation showing nothing in AngularJSHTML Mustache 表示法在 AngularJS 中不显示任何内容
【发布时间】:2018-03-07 16:54:16
【问题描述】:

我正在显示一个无序列表,我将使用 JSON 端点添加到范围中。我正确地从端点接收字典,但是当我使用小胡子符号时,我得到了空白列表项。

<!DOCTYPE html>
<html lang="en" ng-app="AppointmentTrackerApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../static/js/ng-controller.js"></script>
<script src="js/ng-controller.js"></script>
<head>
    <meta charset="UTF-8">
    <title>HomePage</title>
</head>
<body ng-controller="ng-controller">
<div>
    <br>
        <button ng-click="showme=true" ng-hide="showme">New</button>
    <div ng-show="showme">
        <input type="button" ng-click="addAppointment()" value="Add"/><button ng-click="showme=false" ng-show="showme">Cancel</button>
        </br></br>
            Date: <input type="text" ng-model="newAppointment.appDate"></br>
            Time: <input type="text" ng-model="newAppointment.appTime"></br>
            Description: <input type="text" ng-model="newAppointment.description">
    </div>
</div>

</br></br>
<input type="text" name="searchText"><input type="button" ng-click="getAppointments()" value="Search"/>
</br></br>
<ul>
<li ng-repeat="appointment in appointments"></li>
    {{appointment.appDate}} {{appointment.appTime}} {{appointment.description}}
</ul>
</body>
</html>

这是我收到的 JSON 字典:

[
{
id: 4,
appDate: "1",
appTime: "2",
description: "3"
},
{
id: 5,
appDate: "2",
appTime: "3",
description: "4"
},
{
id: 6,
appDate: "3",
appTime: "4",
description: "5"
},
{
id: 7,
appDate: "4",
appTime: "5",
description: "6"
}
]

这是我看到的结果:

【问题讨论】:

  • 您需要告诉我们您的应用/控制器的外观。
  • 另外,你的小胡子代码在你的
  • 标签之外。
  • @MikeMcCaughan,你需要 RESTController 还是 JSController?
  • 我不需要任何东西 :)。您的问题可能会受益于问题中包含“ng-controller”(控制器,而不是内置指令;可能想要更改其名称,顺便说一句)的代码。但是,如果 Ryan 和 Sanket 是正确的,而您只是放错了代码,我会删除这个问题。
  • @RyanGibbs 谢谢你帮我解决了这个问题,有人也回复了它。
  • 标签: javascript html angularjs json


    【解决方案1】:

    您试图在 ng-repeat 指令之外引用 appointment。这应该可以解决它 -

    <li ng-repeat="appointment in appointments">
        {{appointment.appDate}} {{appointment.appTime}} {{appointment.description}}
    </li>
    

    适当的缩进有助于解决此类问题。请确保在您的模板中使用一致的缩进

    【讨论】:

    • 谢谢,结果总是小事。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签