Die richtige Weise, Karten in Listen anzuzeigen, wie in Trello

Question

Ich versuche, Projekt wie Trello zu erstellen. Ich weiß nicht, wie ich es richtig machen soll.

habe ich Funktion init in AngularJS-Controller, wo ich HTTP-Anfragen stellen:

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

Scripts:

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

Ich lade Aufgaben zu $ ​​scope.cards

In console.log() wir kann sehen:

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

, wo das Objekt besteht aus

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

Und jetzt weiß ich nicht, was so zu tun, dass die Karten nur die in der gegebenen Spalte angezeigt werden, die auf der Liste zugeordnet sind. Ich meine: task.list == list._id

für den Moment, als ich es tat

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

Aber es nicht und es funktioniert so kann wahrscheinlich nicht sein, wenn ich will noch eine Datenbank für das Kartenfeld erstellen

Position (Später ziehen & Abwurf ermöglichen)

Kann mir jemand sagen, wie man richtig Karten anzuzeigen in Listen?

EDIT ;;;

vielen Dank für die Hilfe.

Können Sie mir erklären, weil ich immer noch ein Problem mit den Karten haben

ich in AngularJS Rich hat:

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

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

ich auch Hat AJAX Anfrage nach allen Karten:

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

Name: der Name Karte Liste: seine _id Liste

In $ scope.cards I speichert AJAX Anfrage nach allen Karten,

Sein mein Kartenmodell

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

Und ich habe keine Ahnung wie diese Schleife aussieht, würdest du mir irgendwie helfen?

Answer 1

Es ist nicht so einfach mit zwei ng-repeat zu lösen.Vielleicht möchten Sie Ihre list und card Richtlinien schaffen, weil schließlich werden sie komplexe Ansichten sein:

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

Und inmy-list Richtlinie können Sie eine Schleife erstellen, um zu den Karten zu machen:

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