Question

我是Angular的新手，请原谅我的无知！

我有一个页面，其中有三个标签（使用Angular Material for tabs），显示记录列表。每个标签必须显示不同的记录（例如，OPEN标签必须显示具有'Open'状态的记录，CLOSED必须显示处于'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>

这是我的控制器（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该函数被称为allright，但数据不会在页面上刷新。

有人可以帮忙吗？感谢。

Answer 1

您好我刚看了一个Angular材料标签演示，并根据您的需要进行了修改，这是link

你只需要修改

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

它应该可以工作，只需忽略它只是从角度材料演示中复制的css部分，你只需要按照我的方式设置你的html和js。

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

AngularJS：在单击选项卡时刷新数据

1 个答案: