尝试使用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> Pratt & Whitney Visual Analtyics For The Smart Grid</br> Web APP will allow</strong><strong> you to search Electric and Gas</br> 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>
答案 0 :(得分: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>