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

Question

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

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

<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}} 放入你的模板中。