Question

我对角度很新，我正在处理数据录入网页。该网页有三个选项卡。供应商，产品和类型。我首先开始处理“类型”选项卡。如果我可以向我的Rest API显示GET请求的结果，我会很高兴。我的Rest API工作正常：

# curl http://192.168.1.115:8080/type 
[
 {"_id":"56415e7703aba26400fcdb67","type":"Skiing","__v":0},
 {"_id":"56417a8503aba26400fcdb68","type":"Bannana","__v":0},
 {"_id":"56417a8d03aba26400fcdb69","type":"Carrot","__v":0},
 {"_id":"56417a9603aba26400fcdb6a","type":"Beer","__v":0}
]

这里是我的html UPDATED 的相关部分我现在有st-safe-src=all_types但仍然没有快乐......

          <div ng-controller="typeCtrl" class="tab-pane" id="types-v">
            <p>The number {{3 + 4}}.</p>
            <p>message is {{message}}</p>
            <table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped">
                <tbody>
                    <tr ng-repeat="x in displayedCollection">
                        <td>{{x.type}}</td>
                    </tr>
                </tbody>
            </table>
        </div> <!-- end Types Tab -->

...这是我的typeCtrl.js ...

app.controller("typeCtrl", function($scope,$http) {
    $scope.type_to_look_for = "";
    $scope.message = "this is the message. (from typeCtrl)";
    $scope.itemsByPage=15;
    $scope.all_types = function () {
        $http.get("http://192.168.1.115:8080/type").then(function(response) {
            console.log(response);
            console.log(response.data);
            return response.data;
        });
    }
});

...但是当我点击Types标签时，我的数据不会显示。我看了开发人员控制台，我甚至没有看到GET请求启动。我的网页看起来像这样......

......我做错了什么？

Answer 1

没有任何东西可以调用all_types。运行http.get并将回复分配给all_types

app.controller("typeCtrl", function($scope,$http) {
$scope.type_to_look_for = "";
$scope.message = "this is the message. (from typeCtrl)";
$scope.itemsByPage=15;
$http.get("http://192.168.1.115:8080/type").then(function(response) {
    $scope.all_types = response;
    });
}
});

Answer 2

我的理解是，每当您点击“类型”选项卡时，您都希望触发get请求，对吧？如果是，请使用ng-click按如下方式调用all_types函数：

<div ng-controller="typeCtrl" ng-click="all_types()" class="tab-pane" id="types-v" >

此外，您无需在控制器中返回response.data。只需将数据分配给范围对象并在模板中使用它即可。

最后，我建议在工厂中包装所有的ajax调用，然后将这些工厂注入控制器。

Answer 3

这是您的代码

<div ng-controller="typeCtrl" class="tab-pane" id="types-v">
            <p>The number {{3 + 4}}.</p>
            <p>message is {{message}}</p>
            <table st-table="types" class="table table-striped"><!-- Do not need st-safe-src -->
                <tbody>
                    <tr ng-repeat="x in types"><!-- Use the Collection name as types-->
                        <td>{{x.type}}</td>
                    </tr>
                </tbody>
            </table>
</div>

控制器代码

app.controller('typeCtrl', function($scope, $http) {
    $scope.type_to_look_for = "";
    $scope.message = "this is the message. (from typeCtrl)";
    $scope.itemsByPage=15;
    $http.get("http://192.168.1.115:8080/type").then(function(response) {
            console.log(response.data);
            $scope.types = response.data;
    });
});

这是plunker

的工作原理

如何在选中标签时让我的控制器发出GET请求？

3 个答案: