Page itself
<head> <script src="angular/angular.min.js"></script> <script src="angular/angular-route.min.js"></script> <script src="angular/angular-resource.min.js"></script> <script src="workspace/usropr/usrOprApp.js"></script> <script src="workspace/usropr/user_operation_service/service.js"></script> <script src="workspace/usropr/user_operation_controller/selectController.js"></script> </head> <body ng-app="usrOprApp"> <a href="#/edit">Edit</a> <a href="#/list">List</a> <div ng-view></div> </body> usrOprApp.js
var usrOprApp = angular.module("usrOprApp", ["ngRoute"]); usrOprApp.config(["$routeProvider", function($routeProvider) { $routeProvider.when("/list", { templateUrl: "workspace/usropr/user_operation_template/list_operation.html", controller: "Controller1" }); $routeProvider.when("/edit", { templateUrl: "workspace/usropr/user_operation_template/edit_operation.html", controller: "Controller2" }); $routeProvider.otherwise({ templateUrl: "workspace/usropr/user_operation_template/select.html", controller: "selectController" }); }]); usrOprApp.controller("Controller1", ["$scope", function($scope) { }]); usrOprApp.controller("Controller2", ["$scope", function($scope) { }]); service.js
usrOprApp.factory("service", ["$http", "$rootScope", function($http, $rootScope){ var service = {}; var list = []; function getAll() { var conf = { "Content-Type": "application/json;charset=UTF-8", "Accept": "application/json;charset=UTF-8", "Accept-Charset": "UTF-8" }; $http.get("/host/getAll", conf) .success(function(data, status, headers, config){ list = data.ответ; $rootScope.$broadcast("list:updated"); }) .error(function(data, status, headers, config) { }); }; getAll(); service.getList = function() { return list; }; return service; }]); selectController.js
usrOprApp.controller("selectController", [ "$scope", "$rootScope", "service", function($scope, $rootScope, service) { $scope.list = service.getList(); $rootScope.$on("list:updated", function() { $scope.list = service.getList(); }); } ]); and now the template select.html
<meta charset="utf-8"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-4"> <div class="box"> <div class="box-header with-border"> <h3 class="box-title">Выбор</h3> </div> <div class="box-body" id="scrollOpertion"> <div ng-repeat="item in list"> <div class="row" style="padding-bottom: 5px;"> <div class="col-md-12"> <button class="btn btn-default btn-block">{{item.название}}</button> </div> </div> </div> </div> </div> </div> </div> The answer that comes from the server
[ { id: 1, "название": "Java" }, { id: 2, "название": "Python" }, { id: 3, "название": "C++" }] This is when output to select.html via ng-repeat happens; everything falls with an error:
angular.js:13920Error: [$parse:lexerr] http://errors.angularjs.org/1.5.8/$parse/lexerr?p0=Unexpected%20next%20char…4-4%20%5B%D0%BD%5D&p2=item.%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5 If you print only one id, then nothing drops, respectively, and everything is displayed, even if you simply register {{item}}, it will output the entire result in normal form. All files are in UTF-8, the answer also comes in a readable form. Has anyone met with this, or can there be any way to overcome this?
"название"is in quotes, but theidnot, try to make the name without quotes and check your json for validity. And why is the<meta charset="utf-8">in select.html and not on the main page in the head tag? - MrFylypenkoназваниеto Latin, for example toname- MrFylypenko