在列表中显示卡片的正确方法，如在 Trello 中

Posted 2023-03-07

【中文标题】在列表中显示卡片的正确方法，如在 Trello 中

【英文标题】：The correct way to display cards in lists, as in Trello

【发布时间】：2018-02-20 18:50:03

【问题描述】：

我正在尝试创建像 Trello 这样的项目。我不知道如何正确地做到这一点。

我在 AngularJS 控制器中创建了函数 init，我在其中放置了 http 请求：

    $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

在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

暂时我做到了

  <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>

但它不起作用，所以如果我还想为卡片字段创建一个数据库，它可能不会起作用

位置（稍后启用拖放）

谁能告诉我如何在列表中正确显示卡片？

编辑;;;

非常感谢您的帮助。

你能向我解释更多吗，因为我的卡片仍然有问题

我在angularJS中做了directiv：

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 中

<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 查询：

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

name：它的名片 list：它的_id列表

在 $scope.cards 中存储所有卡片后的 AJAX 查询，

这是我的卡片模型

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);

我不知道这个循环的样子，你能帮我吗？

【参考方案1】：

用两个ng-repeat 解决起来并不容易。您可能想要创建 list 和 card 指令，因为最终它们将是复杂的视图：

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

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

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

【讨论】：

嘿，你可以看的更高，对不起我缺乏知识