如何显示来自服务器的项目列表以通过 Angular material 查看？

Question

我正在做一个项目，我在后端有一个项目列表。我必须通过获取请求获取该列表项并将其作为列表项显示在我的视图中。（用户可以 select 列表中的多个条目）。我将列表项从服务器发送到我的 angular 控制器。对于这个项目，我使用 Angular material 设计。如何通过 angular material 元素从控制器显示这些列表项以查看，该元素能够 select 列表中的多个条目？

这是一个代码示例，

angular.module('myApp').factory('searchService', function($log, $http) {

    return {

        getTaxonomie: function() {
            var promise = $http.get("http://espri-host179:8586/callrec/getTaxonomy")
                .success(function(response) {
                    $log.debug("successfully got Taxonomie");
                    return response;
                    console.log(" i am from service");
                })
                .error(function(error) {
                    $log.error("searchService.getTaxonomie error:" + error);
                    return {};
                });

            return promise;
        }
    };
});

我已经创建了一个从服务器获取数据的服务，现在我必须将它添加到控制器然后显示到我的视图。现在我的控制器和视图是空的，因为我不知道如何进一步进行。

任何帮助将不胜感激，谢谢。

Answer 1

这是一个关于如何迭代从工厂收到的数据的基本示例：

javascript:

app.controller('MainCtrl', function($scope, dataFactory) {
    dataFactory.getData().then(function(res) {
        $scope.people = res.data;
    })
});

app.factory('dataFactory', function($http) {
    var vm = this;
    vm.getData = function() {
        return $http.get('data.json');
    };
    return vm;
});

html:

<div ng-repeat="person in people">
  {{$index}}: {{person.name}} is {{person.age}} years old
</div>

data.json:

[
  { "name": "john", "age": 19 },
  { "name": "john2", "age": 20 },
  { "name": "john3", "age": 21 }
]

这里有一个例子plnkr

如何显示来自服务器的项目列表以通过 Angular material 查看？

How to display a list of item from server to view via Angular material?

angularjs

angular-material