Question

我有以下设置：

<h2>Current Items</h2>
<table ng-controller="ItemsController">
    <tr ng-repeat="item in items">
        <td>{{item.id}}</td>
    </tr>
</table>

<h2>Past Items</h2>
<table ng-controller="ItemsController">
    <tr ng-repeat="item in items">
        <td>{{item.id}}</td>
    </tr>
</table>

<script>
    var app = angular.module('app');

    app.factory('Items', ['$resource', function ($resource) {
        return $resource('/api/items/:id/', {id: '@id'});
    }]);

    app.controller("ItemsController", function($scope, Items) {
        $scope.items = Items.query({type: 'current'});
    });
</script>

我无法理解如何重用html表和控制器，但为类型传递了不同的值，因此Items服务为这两个表返回不同的结果。

我知道我可以创建两个控制器并从BaseItemsController继承，但它看起来不对我。有更好的想法吗？

谢谢！

Answer 1

根据您的示例场景，我的建议是您需要使用一个控制器并过滤项目类型：Current |过去你的中继器。像这样：

<div ng-controller="ItemsController">
<h2>Current Items</h2>
<table >
    <tr ng-repeat="item in items | filter: /*CURRENT items*/">
        <td>{{item.id}}</td>
    </tr>
</table>

<h2>Past Items</h2>
<table >
    <tr ng-repeat="item in items | filter: /*PAST items*/">
        <td>{{item.id}}</td>
    </tr>
</table>
</div>

这是一套单品。

或者您可以在控制器中拥有两组项目，例如

$scope.pastItems = [];
$scope.currentItems=[];

更新1：

如果您在不同页面中使用控制器，则可以设置路由并使用$routeparams传递不同的初始化。

Answer 2

这是我的解决方案：

<h2>Current Items</h2>
<div ng-controller="ItemsController">
    <div ng-include="'items.html'" onload="init('current')"></div>
</div>

<h2>Past Items</h2>
<div ng-controller="ItemsController">
    <div ng-include="'items.html'" onload="init('past')"></div>
</div>

<script type="text/ng-template" id="items.html">
    <table ng-controller="ItemsController">
        <tr ng-repeat="item in items">
            <td>{{item.id}}</td>
        </tr>
    </table>
</script>

<script>
    var app = angular.module('app');

    app.factory('Items', ['$resource', function ($resource) {
        return $resource('/api/items/:id/', {id: '@id'});
    }]);

    app.controller("ItemsController", function($scope, Items) {
        $scope.items = [];

        $scope.init = function (type) {
            $scope.items = Items.query({type: type});
        };        
    });
</script>

使用相同的控制器两次使用不同的数据

2 个答案: