javascript - json 在 Angular 中不起作用

Question

我是 Angular 的初学者，所以我希望有人能帮助我!
这是我的 script.js

ar app = angular.module('computer', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
    $routeProvider
        .when('/main', {
            templateUrl : 'main.html',
            controller : 'MainCtrl'
        })
        .when('/service', {
            templateUrl : 'service.html',
            controller : 'ServicesCtrl'
        })
        .otherwise({redirectTo:'/main'});
}])
.controller('MainCtrl', ['$scope', function($scope){

}])

.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
    $http.get('serviceData.json').then(function(response){
        console.log(response);
        $scope.services = response.data;    
    });
}]);

这是service.html

<div class="row">
<div class="col-md-12">
  <h2>Services</h2>
  <div ng-repeat="serv in services">
    <div class="row service">
      <div class="col-md-2">
        <img src="computer-icon.png" class="img-responsive">
      </div>
      <div class="col-md-10">
        <h3>{{ serv.id : serv.name }}</h3>
        <p>{{serv.Description}}</p>
        <button class="btn btn-primary">Read More…</button>
      </div>
    </div>
  </div>
</div>

和 serviceData.json

[{
"id": 1,
"name": "Reparation",
"Description": "Reparation of your hardware"
}, {
"id": 2,
"name": "Installation",
"Description": "Installation of your hardware"
}, {
"id": 3,
"name": "Reparation and Reset",
"Description": "Reparation and Reset of your hardware"
}]

但是我在控制台中有这个错误angular.min.js:118 错误:[$parse:syntax] http://errors.angularjs.org/1.5.8/ $parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=9&p3=serv.id%20%3A%20service.name&p4=%3A%20service.name

以及屏幕上显示的任何内容。谢谢你的帮助 !

Answer 1

您必须使用以下行:

<h3>{{ serv.id : serv.name }}</h3>

像这样:

<h3>{{ serv.id}} : {{serv.name }}</h3>