Question

尝试使用Angular

从mysql Db显示数据时出现此错误

angular.js:13708 Error: [$parse:syntax] http://errors.angularjs.org/1.5.7/$parse/syntax?p0=Code&p1=is%20an%20unexpected%20token&p2=7&p3=x.Zip%20Code&p4=Code
   at angular.js:38
   at throwError (angular.js:14343)
   at t.ast (angular.js:14096)
   at ud.compile (angular.js:14559)
   at kc.parse (angular.js:15488)
   at g (angular.js:15653)
   at k (angular.js:12233)
   at aa (angular.js:9604)
   at $b (angular.js:8633)
   at t (angular.js:8429)(anonymous function) @ angular.js:13708

HTML文件：

<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Visual Analytics - Smart Grid App</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-    Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
  </script>

  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
      text-align: left;
    }

    table#t01 {
      width: 100%;
      background-color: #ffffff;
      font-weight: medium;
      width: 99
    }
  </style>
</head>

<body ng-app="app">

  <a href="images\SPSLOGO.png"><img src="C:/nodeprojects/myapp/images/SPSLOGO.png" width="300"></a>
  <img src="C:/Users/RCallaway/AWS/myapp/images/woman_SPS.jpg" width="75%">
  <h1 align="center"><i><strong>PRATT & WHITNEY United Technogies</strong></i></h1>
  <h1 align="center"><i><strong>Visual Analtyics For The Smart Grid Web APP</strong></i></h1>
  <div class="col-sm-8 col-sm-offsanodet-2">
    <div class="page-header">
      <h3><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pratt & Whitney Visual Analtyics For The Smart Grid</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Web APP will    allow</strong><strong> you to search Electric and    Gas</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usage by Zip Code,   County,</strong><strong> or Month.</strong></h3></div>
    <div ng-controller="emp">
      <form class="form-inline">
        <div class="form-group">
          <span id="tab"><label>Enter Search Criteria:</label></span>
          <input type="text" class="form-control" ng-model="searchFname" />
        </div>
        <button class="btn btn-primary" ng-click="Btn = true" ng-init="Btn = false">
          SEARCH</button>
        <button class="btn btn-danger" ng-click="Btn = false">
          CLEAR</button>
      </form>
      <hr>
      <div class="row">
        <table class="table table-bordered">

          <tr>
            <th>Zip Code</th>
            <th>County</th>
            <th>Month</th>
            <th>City</th>
            <th>Type</th>
            <th>Meter Reading Dates</th>
            <th>Kwh Used</th>
            <th>BGE Electric</th>
            <th>Gas Type</th>
            <th>Therms Used</th>
            <th>BGE Gas Delivery Service</th>
            <th>BGE Gas Commodity</th>
            <th>TOTAL AMOUNT DUE</th>
          </tr>

          <tr ng-repeat="x in employeeData | filter : searchFname" ng-if="Btn == true">

            <td>{{x.Zip Code }}</td>
            <td>{{x.County }}</td>
            <td>{{x.Month }}</td>
            <td>{{x.City }}</td>
            <td>{{x.Type }}</td>
            <td>{{x.Meter Reading Dates }}</td>
            <td>{{x.Kwh Used }}</td>
            <td>{{x.BGE Electric }}</td>
            <td>{{x.Gas Type }}</td>
            <td>{{x.Therms Used }}</td>
            <td>{{x.BGE Gas Delivery Service }}</td>
            <td>{{x.BGE Gas Commodity }}</td>
            <td>{{x.TOTAL AMOUNT DUE }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

您不能在对象键之间使用空格来访问这些键值如 x.Zip Code ，要访问此类键值，您可以使用 x [＆＃39;邮政编码＆＃39]

这是我的工作代码。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Visual Analytics - Smart Grid App</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384- Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 { width: 100%; background-color: #ffffff; font-weight: medium; width: 99 } </style> <script> angular.module('app',[]) .controller('employeeCtrl',['$scope', function($scope){ $scope.employeeData = [ { "Zip Code" : "213", "County":"India", "Month":"January", "City":"Ahmedabad", "Type":"test", "Meter Reading Dates":"test", "Kwh Used":"test", "BGE Electric":"test", "Gas Type":"test", "Therms Used":"test", "BGE Gas Delivery Service":"test", "BGE Gas Commodity":"test", "TOTAL AMOUNT DUE":"2145" }, { "Zip Code" : "213", "County":"India", "Month":"March", "City":"Surat", "Type":"test", "Meter Reading Dates":"test", "Kwh Used":"test", "BGE Electric":"test", "Gas Type":"test", "Therms Used":"test", "BGE Gas Delivery Service":"test", "BGE Gas Commodity":"test", "TOTAL AMOUNT DUE":"2145" } ] }]); </script> </head> <body ng-app="app"> <a href="images\SPSLOGO.png"><img src="C:/nodeprojects/myapp/images/SPSLOGO.png" width="300"></a> <img src="C:/Users/RCallaway/AWS/myapp/images/woman_SPS.jpg" width="75%"> <h1 align="center"><i><strong>PRATT & WHITNEY United Technogies</strong></i></h1> <h1 align="center"><i><strong>Visual Analtyics For The Smart Grid Web APP</strong></i></h1> <div class="col-sm-8 col-sm-offsanodet-2"> <div class="page-header"> <div > <form class="form-inline"> <div class="form-group"> <span id="tab"><label>Enter Search Criteria:</label></span> <input type="text" class="form-control" ng-model="searchFname" /> </div> <button class="btn btn-primary" ng-click="Btn = true" ng-init="Btn = false"> SEARCH</button> <button class="btn btn-danger" ng-click="Btn = false"> CLEAR</button> </form> <hr> <div class="row" ng-controller ="employeeCtrl" > <table class="table table-bordered"> <tr> <th>Zip Code</th> <th>County</th> <th>Month</th> <th>City</th> <th>Type</th> <th>Meter Reading Dates</th> <th>Kwh Used</th> <th>BGE Electric</th> <th>Gas Type</th> <th>Therms Used</th> <th>BGE Gas Delivery Service</th> <th>BGE Gas Commodity</th> <th>TOTAL AMOUNT DUE</th> </tr> <tr ng-repeat="x in employeeData | filter : searchFname"> <td>{{x['Zip Code'] }}</td> <td>{{x['County'] }}</td> <td>{{x.Month }}</td> <td>{{x.City }}</td> <td>{{x.Type }}</td> <td>{{x['Meter Reading Dates'] }}</td> <td>{{x['Kwh Used'] }}</td> <td>{{x['BGE Electric'] }}</td> <td>{{x['Gas Type'] }}</td> <td>{{x['Therms Used'] }}</td> <td>{{x['BGE Gas Delivery Service'] }}</td> <td>{{x['BGE Gas Commodity'] }}</td> <td>{{x['TOTAL AMOUNT DUE'] }}</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>

Angular parse：语法错误

1 个答案: