顯示在列表中卡，在Trello

Question

正確的方法，我想創建Trello項目。我不知道如何正確地做。

我創建函數初始化在AngularJS控制器這裏我把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> 

但它不工作，所以它可能無法如果我想還是創造了卡領域

數據庫

位置（稍後啓用拖動&下降）

誰能告訴我如何正確顯示卡片在列表中？

編輯;;;

非常感謝你的幫助。

你能解釋更多的我，因爲我仍然有

我directiv在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

<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

名：其名片 名單：其_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); 

而且我有不知道這個循環如何看起來，你會幫助我嗎？

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