javascript - AngularJS : Refreshing data in view on click of tabs

Question

我是 Angular 的新手，所以请原谅我的无知!

我有一个页面，其中包含三个选项卡(使用 Angular Material 作为选项卡)，显示记录列表。不过，每个选项卡必须显示不同的记录(例如，“打开”选项卡必须显示具有“打开”状态的记录，“关闭”选项卡必须显示处于“关闭”状态的记录等):

<div ng-controller="SomeController as someCtrl">
<md-content>
    <md-tabs>
        <md-tab id="tab1" >
            <md-tab-label>OPEN</md-tab-label>
            <md-tab-body>                
                <div ng-view></div>
            </md-tab-body>
        </md-tab>
        <md-tab id="tab2" md-on-select="someCtrl.showTaskListing('Error')">
            <md-tab-label>EXCEPTIONS</md-tab-label>
            <md-tab-body>
                <div ng-view></div>
            </md-tab-body>
        </md-tab>
        <md-tab id="tab3" md-on-select="someCtrl.showTaskListing('Closed')">
            <md-tab-label>CLOSED</md-tab-label>
            <md-tab-body>
                <div ng-view></div>
            </md-tab-body>
        </md-tab>
    </md-tabs>
</md-content>
</div>

这是我的 Controller (RequestSenderService 只是一个实用服务，用于执行 $http 操作):

angular
    .module('SomeModule')
    .controller('SomeController', someController);

function SomeController($scope, $location, $http, RequestSenderService) {

    showTaskListing('Incomplete');

    function showTaskListing(status) {

        var httpResponsePromise = RequestSenderService.sendRequest("/getTasks?status=" + status);

        httpResponsePromise.then(
            function (response) {
                setTimeout(function () {
                    $scope.$apply(function () {
                            $scope.tasks = response.data;
                            for (task in this.tasks) {
                                task.isSelected = true;
                            }
                        }
                    )
                }, 1000);
            }
        )
    }

这是路由配置:

angular.module("SomeModule",["ngRoute","ngMaterial"])
    .config(function($routeProvider){
        $routeProvider
            .when("/tasks", {
                templateUrl : "js/tasklist/tasklist.partial.html",
                controller : "SomeController as someCtrl"
            })
            .when("/addTask", {
                templateUrl : "js/taskDetails.partial.html",
                controller : "AnotherController as anotherCtrl"
            })
            .otherwise( {
                redirectTo : "/tasks"
            })

    }) ;

最后这是我的模板:

<div>
    <table style="width:100%">
        <tr>                
            <th>Task Name</th>
            <th>Description</th>
            <th>Type</th>
        </tr>

        <tr ng-repeat="task in tasks">                
            <td ng-bind="task.title"></td>
            <td ng-bind="task.description"></td>
            <td ng-bind="task.type"></td>
        </tr>
    </table>
</div>

现在，当我加载页面(/tasks)时，第一个选项卡上的数据加载正常，但它也会在其他两个选项卡上加载相同的数据，即使我已经给出了md-on-select 在每个选项卡上，函数都会被调用，但页面上的数据不会刷新。

有人可以帮忙吗？谢谢。

Answer 1

您好，我刚刚查看了 Angular Material 选项卡演示，并根据您的需求对其进行了修改，这是 link

你只需要修改

$scope.selectedTab = function(index) {
    // your httpResponsePromise
}

它应该可以工作，只需忽略它刚刚从 Angular Material 演示中复制的代码的 css 部分，您只需按照我的方式设置 html 和 js 即可。

基本上，md-on-select 是在单击时计算的表达式，而不是事件处理程序。因此您必须保存 md-on-select="result = selectedTab()" ，然后将 {{result}} 放入模板中。