如何通过Angular材料显示服务器中的项目列表?

时间:2015-05-13 11:17:13

标签: angularjs angular-material

我正在开发一个项目,我在后端有一个项目列表。我必须通过获取请求获取该列表项并作为列表项显示在我的视图中。 (用户可以从列表中选择多个条目)。我从服务器到我的角度控制器得到了列表项。对于这个项目,我使用Angular材料设计。如何通过角度素材元素从控制器显示这些列表项,以便从列表中选择多个条目?

这是一个代码示例,

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;
        }
    };
});

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

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

1 个答案:

答案 0 :(得分: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