像在Trello中一样，在列表中显示卡片的正确方法 [英] The correct way to display cards in lists, as in Trello

问题描述

我正在尝试创建类似Trello的项目.我不知道该怎么做.

I'm trying to create project like Trello. I do not know how to do it properly.

我在AngularJS Controller中创建了函数init，并在其中放置了HTTP请求:

I created function init in AngularJS Controller where i put http requests:

    $scope.loadLists();
    $scope.loadsCards();

脚本:

$scope.loadLists = function () {
    return ApiService.staff.list()
        .then(function (resp) {
            for (var i = 0; i < resp.length; i++) {
                $scope.lists[i] = resp[i];
            }
        })
}

$scope.loadsCards = function () {
    return ApiService.staff.cards()
        .then(function (resp) {
            for (var i = 0; i < resp.length; i++) {
                $scope.cards = resp;
            }
            console.log($scope.cards)
        })
}

我正在将任务下载到$ scope.cards

I'm downloading tasks to $scope.cards

在 console.log()中，我们可以看到:

Array [ Object, Object, Object, Object, Object, Object, Object, Object ]

对象组成的地方

var CardSchema = new Schema({
  name: { type: String, maxlength: 20, required: true },
  list: { type: Schema.Types.ObjectId, ref: 'List' },
  updated: { type: Date, default: Date.now },
  created: { type: Date, default: Date.now },
  active: Boolean
});

现在我不知道该怎么办，这样卡就只会显示给定列中分配给列表的卡.我的意思是: task.list == list._id

And now I do not know what to do so that the cards are displayed only those in the given column that are assigned to the list. I mean : task.list == list._id

就目前而言

  <div ng-repeat="list in lists track by $index">
    <div style="float: left; margin-left: 5px;">
      <div id="tasks">

        <h3>{{list.name}}</h3>{{$index}}

        <ul>
          <li ng-repeat="task in cards"> 

            <div ng-hide="task.list == list._id">
              {{task.name}}
            </div>

            <i ng-click="removeTask(task)" class="fa fa-trash-o"></i></li>
        </ul>

        <form ng-submit="addTask(list._id, $index, newTask)">
          <input type="text" ng-model="newTask" placeholder="add a new task" required />
        </form>

      </div>
    </div>
  </div>

但是它不起作用，所以如果我仍然想为卡字段创建数据库，那可能就不可能了

But it does not work and so it probably can not be if I want to still create a database for the card field

位置(以后可以启用拖放)

Position (Later to enable drag & dropping)

有人可以告诉我如何正确显示列表中的卡片吗?

Can anyone tell me how to properly display cards in lists?

EDIT ;;;

非常感谢您的帮助.

能不能向我解释一下，因为我的卡还是有问题

Can you explain more to me because I still have a problem with the cards

我在angularJS中做了Directiv:

I did directiv in angularJS:

App.directive('myList', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div style="float: left; margin-left: 5px;"><div id="tasks">{{list.name}}<br>{{card.name}}</div></div>'
    };
});

App.directive('myCard', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div style="float: left; margin-left: 5px;"><div id="tasks">{{card.name}}</div></div>'
    };
});

和index.ejs

and in index.ejs

<my-list ng-repeat="list in lists" list-data="list"></my-list>
<my-card ng-repeat="card in listData.cards" card-data="card"></my-card>

我还在所有卡之后都进行了AJAX查询:

I also did AJAX inquiry after all cards :

https://gist.github.com/anonymous/ed17c3fd675ea4361cb8fbd78e94cb37

姓名:其名片列表:其_id列表

name: its name card list: its _id list

在$ scope.cards中，我将所有卡存储在AJAX查询中，

In $scope.cards I stores AJAX inquiry after all cards,

它是我的卡型号

var mongoose = require('mongoose');
var Schema = mongoose.Schema;


var CardSchema = new Schema({
  name: { type: String, maxlength: 20, required: true },
  // description: { type: String, maxlength: 300 },
  list: { type: Schema.Types.ObjectId, ref: 'List' },
  updated: { type: Date, default: Date.now },
  created: { type: Date, default: Date.now },
  active: Boolean
});

module.exports = mongoose.model('Card', CardSchema);

我不知道这个循环的样子，你能以某种方式帮助我吗?

And I have no idea how this loop looks, would you help me somehow?

推荐答案

用两个 ng-repeat 解决问题并不是那么容易.您可能要创建 list 和 card 指令，因为最终它们将是复杂的视图:

It's not that easy to solve with two ng-repeat's. You may want to create your list and card directives because eventually they will be complex views:

<my-list ng-repeat="list in lists" list-data="list"></my-list>

在 my-list 指令中，您可以创建一个循环以渲染卡片:

And in my-list directive, you can create a loop to to render cards:

<my-card ng-repeat="card in listData.cards" card-data="card"></my-card>

这篇关于像在Trello中一样，在列表中显示卡片的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！