Javascript 如何显示角度服务中的数据
我在使用angularJS将数据从服务显示到html视图时遇到问题。我试图在视图中显示一个名为“事件”的已提交表单列表。然后,我希望能够单击列表项并查看通过表单提交的所有数据字段。以下是我的代码: service.jsJavascript 如何显示角度服务中的数据,javascript,html,angularjs,service,controller,Javascript,Html,Angularjs,Service,Controller,我在使用angularJS将数据从服务显示到html视图时遇到问题。我试图在视图中显示一个名为“事件”的已提交表单列表。然后,我希望能够单击列表项并查看通过表单提交的所有数据字段。以下是我的代码: service.js (function () { 'use strict'; angular .module('app.occurences') .service('occcurencesService', occcurences); occcurences.$inject =
(function () {
'use strict';
angular
.module('app.occurences')
.service('occcurencesService', occcurences);
occcurences.$inject = ['$http', '$log', '$q', 'configuration','service_helpers'];
function occcurences($http, $log, $q, configuration, service_helpers) {
this.selectAll = selectAll;
this.select = select;
this.insert = insert;
this.delete = deleteOccurence;
this.update = update;
var baseUrl = configuration.redSkyServiceBaseUrl;
var occurencesUrl = baseUrl + 'api/occurences';
// var deferred = $q.defer();
var occurencesData = {};
$http.get(occurencesUrl)
function select(id) {
$log.log("Getting occurence " + id);
var url = occurencesUrl + '/' + id;
return $http.get(url)
.then(getDataSuccess)
.catch(getDataFail)
}
function selectAll()
{
$log.log("Getting occurences");
return $http.get(occurencesUrl)
.then(getDataSuccess)
.catch(getDataFail)
}
function insert(occurence)
{
$log.log('Inserting occurence');
if (!validateOccurence(occurence))
{
var errorText = 'Tried to insert invalid occurence: ' + JSON.stringify(occurence);
$log.error(errorText);
$q.reject(errorText);
}
return $http.post(occurencesUrl, occurence)
.then(getDataSuccess)
.catch(getDataFail)
}
//TODO: Untested
function deleteOccurence(occurence)
{
$log.log('Deleting occurence occurence');
var url;
if (typeof(occurence) === "number")
{
$log.log('Deleting occurence occurence ' + occcurence);
url= occcurencesUrl +'/' + occurence
}
else if (typeof(occurence) === "object")
{
$log.log('Deleting occurence occurence ' + occcurence.OccurenceID);
url= occcurencesUrl +'/' + occurence.OccurenceID;
}
return $http.delete(url)
.then(getDataSuccess)
.catch(getDataFail)
}
//TODO: Untested
function update(occurence)
{
$log.log('updating occurence');
if (!validateOccurence(occcurence))
{
var errorText = 'Tried to insert invalid occurence: ' + JSON.stringify(occurence);
$log.error(errorText);
$q.reject(errorText);
}
var url= occcurencesUrl +'/' + occurence.OccurenceID;
return $http.put(url, occrence)
.then(getDataSuccess)
.catch(getDataFail)
}
function validateOccurence (occurence)
{
// TODO: validate the occurences
return true;
}
function getDataSuccess(response) {
return service_helpers.getDataSuccess(response);
}
function getDataFail(error) {
return service_helpers.getDataFail(error)
}
}
})
controller.js
(function () {
'use strict';
angular
.module('app.occurences')
.controller('EditOccurrenceFormCtrl', EditOccurrenceCtrl);
EditOccurrenceCtrl.$inject = ['$scope', '$http', 'occcurencesService','$log'];
function EditOccurrenceCtrl($scope, $http, occcurencesService, $log) {
$scope.title = 'Editoccurrence';
activate();
function selectOccurrence(occcurencesService) {
var occurrenceList = this;
this.select() = occurrenceList.list;
}
function activate() {
}
}
})();
index.html
<div ng-controller="EditOccurrenceFormCtrl as editOccurrence">
<p ng-repeat="occurrenceList in occurrenceList.list">
{{occurrenceList.name}}: {{occurrenceList.age}}</p></div>
您需要使用editOcurrence,因为您使用的是controllerAs语法
<div ng-controller="EditOccurrenceFormCtrl as editOccurrence">
<p ng-repeat="occurrenceList in editOccurrence.occurrenceList.list">
{{occurrenceList.name}}: {{occurrenceList.age}}
</p>
</div>
控制器中有很多错误代码-您需要的是简单的-
function controller(occurencesService){
Var vm =this;
occurencesService.selectAll().then(function(response){
vm.occurences = response;
}
vm.selectOccurence = function (occurence) {
vm.selectedOccurence = occurence;
}
}
在将事件分配给vm变量的作用域之前,我们必须解决selectall承诺
如果要从列表中选择特定事件,请使用视图中的SelectOccurrence功能将其绑定到ng click事件
祝你好运错误是什么?你看到控制台里有什么东西吗?什么有效,什么无效?实际行为是什么?预期行为是什么?也不要对迭代元素和occurrenceList.list中ng repeat=occurrenceList中的数组使用相同的名称。您可以在occurrenceList.list中执行ng repeat=occurrenceItem,然后在该元素中使用occurrenceItem.amd这是什么。select=occurrenceList.list;该怎么办?不能将变量分配给函数的结果,该函数不是JavaScript。