javascript - The correct way to display cards in lists, as in Trello -

i'm trying create project trello. not know how properly.

i created function init in angularjs controller put http requests:

    $scope.loadlists();     $scope.loadscards(); 

scripts:

$scope.loadlists = function () {     return apiservice.staff.list()         .then(function (resp) {             (var = 0; < resp.length; i++) {                 $scope.lists[i] = resp[i];             }         }) }  $scope.loadscards = function () {     return apiservice.staff.cards()         .then(function (resp) {             (var = 0; < resp.length; i++) {                 $scope.cards = resp;             }             console.log($scope.cards)         }) } 

i'm downloading tasks $scope.cards

in console.log() can see:

array [ object, object, object, object, object, object, object, object ] 

where object consists of

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

and not know cards displayed in given column assigned list. mean : task.list == list._id

for moment did it

  <div ng-repeat="list in lists track $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 new task" required />         </form>        </div>     </div>   </div> 

but not work , can not if want still create database card field

position (later enable drag & dropping)

can tell me how display cards in lists?

edit;;;

thank help.

can explain more me because still have problem cards

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

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> 

i did ajax inquiry after cards :

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

name: name card list: _id list

in $scope.cards stores ajax inquiry after cards,

its card model

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 have no idea how loop looks, me somehow?

it's not easy solve 2 ng-repeat's. may want create list , card directives because complex views:

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

and in my-list directive, can create loop to render cards:

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