Javascript 如何显示角度服务中的数据

Javascript 如何显示角度服务中的数据,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 =

我在使用angularJS将数据从服务显示到html视图时遇到问题。我试图在视图中显示一个名为“事件”的已提交表单列表。然后,我希望能够单击列表项并查看通过表单提交的所有数据字段。以下是我的代码:

service.js

(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。