AngularJs To Do列表指令 [英] AngularJs To Do list Directive
问题描述
修改
JS小提琴加入的jsfiddle
我想学习AngularJs所以我试图把做应用到新的水平。
I'm trying to learn AngularJs and so I'm trying to take the "To Do" application to the next level.
而不是一个项目正在做或没有，我想有三种状态：（状态）
Instead of an item being done or not, I want to have three states: (status)
- 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}
]
我有一个奇妙的显示每个状态的三个列表。当我从一个状态到另一个移动项目，它从原来的列表中消失并出现在新状态相应的列表。
I've got three lists that displays each status wonderfully. When I move an item from one status to another, it goes away from the original list and appears in the appropriate list for the new status.
不过，我现在工作的指示，我想将这些三个不同的列表到一个单一的指令，这真的踢了我的屁股。
However, I am now working with directives and I want to turn those three separate lists into a single directive and it's really kicking my butt.
这是我的待办事项列表的硬codeD版本，显示在一个等待状态的待办事项。
This is the hard-coded version of my To-Do list that displays the To-Do items in a 'Waiting' status.
<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>
下面是我做的尝试，一个指令
Here is my attempt at making that a directive
<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>
这里是指令code
And here is the directive code
.directive("taskListDirective", function() {
return {
restrict: "EA",
scope: {
header: "@",
taskList: "=",
statusType: "@"
},
template: function () {
return angular.element(document.querySelector("#taskListTemplate")).html();
}
};
})
什么工作：
- 头（头跨就好推出）
- 任务列表（任务列表跨就好推出）
什么不指令工作：
- 设置statusType，所以我不必硬code 2模板
- 的清单拿出空的，但我想这是一个范围内的事情，我打算把这些变成指令以及
谢谢，
杜安
下面是我的的jsfiddle
我包括形式添加新项...并有两个硬codeD列出了等待和工作......我注释掉的HTML指令，因为我无法得到即在工作的jsfiddle
I included the form to add new items...and there are two hard coded lists for "Waiting" and "Working"...and I commented out the html for the directive as I couldn't get that to work in JSFiddle.
推荐答案
您应该能够引用 statusType 在你的指令，并用它来过滤的。
You should be able to reference statusType in your directive and use it to filter on.
ng-repeat="task in taskList | filter:{status:statusType}"
和
{{getStatusCount(statusType)}}
这是在控制器
由于指令采用隔离范围，不能引用 priorityOptions 和 statusOptions 。你可以把它们放入您任务列表做同样的方式。但你也可以定义为指令的控制器，并把这些东西在那里。在这里，我都做了。既然你还在你的表单中使用 priorityOptions ，我一直是在控制器和在该指令通过了它。由于 statusOptions 中的指令只用，我把它出的控制器。
Since the directive uses isolated scope, you can't reference priorityOptions and statusOptions that are in the controller. You could pass them in the same way you do with taskList. But you could also define a controller for the directive and put those things there. Here I've done both. Since you also use priorityOptions in your form, I kept it in the controller and passed it in to the directive. Since statusOptions is only used in the directive, I moved it out of the 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 更新为使用仅直接
这篇关于AngularJs To Do列表指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
