AngularJs 待办事项列表指令

Question

编辑添加了 JS Fiddle JSFiddle

我正在尝试学习 AngularJs，因此我正在尝试将“待办事项”应用程序提升到一个新的水平。

我想要三种状态:(状态)，而不是一个项目是否完成了

• 0 = 等待
• 1 = 工作
• 2 = 完成

我也想有一个优先权:

• 1 = 高
• 2 = 中等
• 3 = 低

这是我的数据:

[
  {"taskId":1,"description":"Test 1.","priority":1,"status":0}
  {"taskId":2,"description":"Test 2.","priority":1,"status":0}
  {"taskId":3,"description":"Test 3.","priority":1,"status":1}
]

我有三个列表，可以很好地显示每个状态。当我将项目从一种状态移动到另一种状态时，它会离开原始列表并出现在新状态的相应列表中。

但是，我现在正在使用指令，我想将这三个单独的列表变成一个指令，这真的让我很吃力。

这是我的待办事项列表的硬编码版本，显示处于“等待”状态的待办事项。

<h3 style="display: inline-block;">Waiting</h3>
<div class="label" style="display: inline-block;" ng-hide="getStatusCount(0) == 0">{{getStatusCount(0)}}</div>
    <div class="infoTableWrap">
    <table class="infoTable">
        <thead>
            <tr>
                <th style="text-align: left">Description</th>
                <th style="text-align: right">Priority</th>
                <th style="text-align: right">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="task in tasks.items | filter:{status:0}">
                <td style="text-align: left">{{task.description}}</td>
                <td style="text-align: right">
                    <select name="ddlPriority" ng-model="task.priority" ng-options="option.id as option.name for option in priorityOptions"></select>
                </td>
                <td style="text-align: right">
                    <select name="ddlStatus" ng-model="task.status" ng-options="option.id as option.name for option in statusOptions"></select>
                </td>
            </tr>
        </tbody>
    </table>
</div>

这是我尝试将其作为一个指令

<script type="text/template" id="taskListTemplate">
    <h3 style="display: inline-block;">{{header}}</h3>
    <div class="label" style="display: inline-block;" ng-hide="getStatusCount(2) == 0">{{getStatusCount(2)}}</div>
    <div class="infoTableWrap">
        <table class="infoTable">
            <thead>
                <tr>
                    <th style="text-align: left">Description</th>
                    <th style="text-align: right">Priority</th>
                    <th style="text-align: right">Status</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="task in taskList | filter:{status:2}">
                    <td style="text-align: left">{{task.description}}</td>
                    <td style="text-align: right">
                        <select name="ddlPriority" ng-model="task.priority" ng-options="option.id as option.name for option in priorityOptions"></select>
                    </td>
                    <td style="text-align: right">
                        <select name="ddlStatus" ng-model="task.status" ng-options="option.id as option.name for option in statusOptions"></select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</script>

我是这样调用它的:

div task-list-directive header="Completed Tasks" status-type="2" task-list="tasks.items"></div>

这是指令代码

.directive("taskListDirective", function() {
return {
    restrict: "EA",
    scope: {
        header: "@",
        taskList: "=",
        statusType: "@"
    },
    template: function () {
    return angular.element(document.querySelector("#taskListTemplate")).html();
    }
};
})

什么有效:

• header ( header 显示得很好)
• taskList(任务列表很好)

指令中不起作用的地方:

• 设置 statusType，这样我就不必在模板中对 2 进行硬编码
• 列表是空的，但我认为这是一个范围问题，我打算将它们也变成指令。

谢谢，杜安

这是我的 JSFiddle

我包含了添加新项目的表单...并且有两个用于“等待”和“工作”的硬编码列表...并且我注释掉了指令的 html，因为我无法让它工作在 JSFiddle 中。

Answer 1

您应该能够在指令中引用 statusType 并使用它进行过滤。

ng-repeat="task in taskList | filter:{status:statusType}"

和

{{getStatusCount(statusType)}}

由于该指令使用隔离范围，您不能引用 Controller 中的 priorityOptions 和 statusOptions。您可以像处理 taskList 一样传递它们。但是您也可以为指令定义一个 Controller 并将这些东西放在那里。在这里我都做了。由于您还在表单中使用了 priorityOptions，因此我将其保存在 Controller 中并将其传递给指令。由于 statusOptions 仅在指令中使用，因此我将其移出了 Controller 。

.directive("taskListDirective", function () {
    return {
        restrict: "EAC",
        scope: {
            header: "@",
            taskList: "=",
            priorityOptions: "=",
            statusType: "@"
        },
        template: function () {
            return angular.element(document.querySelector("#taskListTemplate")).html();
        },
        controller: function ($scope) {
            $scope.getStatusCount = function (statusType) {
                return countStatusTypes(statusType);
            }

            //Private Methods
            function countStatusTypes(statusType) {
                var count = 0;
                angular.forEach($scope.taskList, function (item) {
                    if (item.status === statusType * 1) {
                        count++;
                    }
                });
                return count;
            }               

            $scope.statusOptions = [{
                name: 'Waiting',
                id: 0
            }, {
                name: 'Working',
                id: 1
            }, {
                name: 'Completed',
                id: 2
            }];
        }
    };
});

这是你的 JSFiddle更新为直接独占使用。