javascript - 查看输出不会显示 - Thinbug

查看输出不会显示

时间：2017-09-07 10:04:28

标签： javascript html angularjs

我正在使用该教程在我的页面上显示联系人详细信息。代码不显示名字和姓氏。请找到以下代码。

我的index.html

    <!DOCTYPE html>
<html data-ng-app="myContactApp">
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
            <script src="app.js"></script>
            <title>My Contact Application</title>
    </head>

    <body>
        <h1>Contact App</h1>
        <div data-ng-controller="contactController as ctrl">
            <div data-ng-repeat="con in ctrl.contactArr">
                <span>{{con.name.first+ " "+con.name.last}}</span>
            </div>
        </div>
    </body>
</html>

我的app.js文件

var app=angular.module("myContactApp",[]);

app.controller("contactController",contactCtrl);

function contactCtrl(){
this.contactArr = [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "romain",
        "last": "hoogmoed"
      },
      "location": {
        "street": "1861 jan pieterszoon coenstraat",
        "city": "maasdriel",
        "state": "zeeland",
        "postcode": 69217
      },
      "email": "romain.hoogmoed@example.com",
      "login": {
        "username": "lazyduck408",
        "password": "jokers",
        "salt": "UGtRFz4N",
        "md5": "6d83a8c084731ee73eb5f9398b923183",
        "sha1": "cb21097d8c430f2716538e365447910d90476f6e",
        "sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
      },
      "dob": "1983-07-14 07:29:45",
      "registered": "2010-09-24 02:10:42",
      "phone": "(656)-976-4980",
      "cell": "(065)-247-9303",
      "id": {
        "name": "BSN",
        "value": "04242023"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/83.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
      },
      "nat": "NL"
    }
  ]


}

当我运行HTTP-server时，我的页面没有显示名字和姓氏。我做错了吗？

2 个答案:

答案 0 :(得分：3)

您的代码运行正常。请注意app.js或角度依赖是否正确加载。 https://jsfiddle.net/Prasanna15/m3q70umq/ 你可以查看你的代码。尝试使用https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js这个

答案 1 :(得分：1)

您的代码就像魅力一样。这没有错。请确保已加载所有资源（app.js＆amp; https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js）。在浏览器调试器中打开网络选项卡以检查这一点。 还要确保您清理了浏览器缓存。

<!DOCTYPE html>
<html data-ng-app="myContactApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="app.js"></script>
    <title>My Contact Application</title>
  </head>
  <body>
    <h1>Contact App</h1>
    <div data-ng-controller="contactController as ctrl">
      <div data-ng-repeat="con in ctrl.contactArr">
        <span>{{con.name.first+ " "+con.name.last}}</span>
      </div>
    </div>
  </body>
</html>

<强> - ＆GT; demo fiddle