2017-10-15 21 views
1

有人可以告訴我爲什麼我不能打印出整個陣列作者是在boardcards?AngularJS不能寫整個陣列

https://plnkr.co/edit/abZMTi7fSJ6sX691Ubm0?p=preview

<ul ng-repeat="card in assignedCards"> 
     <div> 
      {{card.name}} {{card._id}} 
     </div> 
      <li ng-repeat="item in card.boardcards.Author">{{item}}</li> 
     </ul> 

,這裏是對象

: 

    $scope.assignedCards = { 
    "_id" : "59e36c44b89e5f2fb01d1310", 
    "name" : "1", 
    "boardcards" : { 
     "name" : "1", 
     "_id" : "59e36c48b89e5f2fb01d1312", 
     "Author" : [ 
      "59df60fb6fad6224f4f9f22e", 
      "59df60fb6fad6224f4f9f22f", 
      "59df60fb6fad6224f4f9f22a" 
     ] 
    } 
} 

編輯

我用烏爾例子,但仍然不打印出作者,這個作者是一個字符串數組也許這是原因??

及其與模型貓鼬

lists : [{ 
    list: String, 
    cards: [{ 
     name: String, 
     Author: [{type : Schema.Types.ObjectId, ref: 'User'}] 
    }] 
    }], 

也許這裏的問題?

回答

0

更新:

問題鑑定完整的對象被共享,這不是重複由於第二級陣列中重複之後,這已被使用track by $index解決,請參考下面的代碼。

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', function MyController($scope) { 
 
    $scope.name = 'World'; 
 
    $scope.assignedCards = [{ 
 
    "_id": "59e36c44b89e5f2fb01d1310", 
 
    "name": "1", 
 
    "boardcards": { 
 
     "name": "1", 
 
     "_id": "59e36c48b89e5f2fb01d1312", 
 
     "Author": ["59df60fb6fad6224f4f9f22e", "59df60fb6fad6224f4f9f22f", "59df60fb6fad6224f4f9f22a", "59df60fb6fad6224f4f9f22b", "59df60fb6fad6224f4f9f22c", "59df60fb6fad6224f4f9f22d", "59df60fb6fad6224f4f9f22e"] 
 
    } 
 
    }, { 
 
    "_id": "59e36e2c8c06dd331c3467d6", 
 
    "name": "raz raz", 
 
    "boardcards": { 
 
     "name": "fea", 
 
     "_id": "59e36e508c06dd331c3467f2", 
 
     "Author": ["59df60fb6fad6224f4f9f22d"] 
 
    } 
 
    }] 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller='MyController' ng-app="myApp"> 
 
    <p>Hello {{name}}!</p> 
 
    <ul ng-repeat="card in assignedCards"> 
 
    <div> 
 
     {{card.name}} {{card._id}} 
 
    </div> 
 
    <li ng-repeat="item in card.boardcards.Author track by $index">{{item}}</li> 
 
    </ul> 
 
</div>

老答案:

問題是你正在使用的對象,因此,沒有必要對一個ng-repeat,所以你可以做喜歡的。訪問對象屬性,如assignedCards.nameassignedCards._id,由於屬性assignedCards.boardcards.Author是一個數組,我們可以使用我們通常的ng-repeat來獲取值!

var app=angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name='World'; 
 
    $scope.assignedCards= { 
 
    "_id": "59e36c44b89e5f2fb01d1310", "name": "1", "boardcards": { 
 
     "name": "1", "_id": "59e36c48b89e5f2fb01d1312", "Author": [ "59df60fb6fad6224f4f9f22e", "59df60fb6fad6224f4f9f22f", "59df60fb6fad6224f4f9f22a"] 
 
    } 
 
    } 
 
});
<script src="https://code.angularjs.org/1.4.12/angular.js"></script> 
 
<body ng-controller="MainCtrl" ng-app='plunker'> 
 
    <p>Hello {{name}}!</p> 
 

 
    <ul> 
 
    <div> 
 
     {{assignedCards._id}} {{assignedCards.name}} 
 
    </div> 
 
    <li ng-repeat="item in assignedCards.boardcards.Author">{{item}}</li> 
 
    </ul> 
 
</body>

+0

嘿我讓編輯可以看看嗎? –

+0

@AnetaJabłońska你可以請分享從服務器收到的完整的JSON,請參閱[這裏](https://ourcodeworld.com/articles/read/112/how-to-pretty-print-beautify-a-json-字符串) –

+0

https://gist.github.com/Turqus/351de033aefa8687b3f4d05b4ca4b123這裏是內容{{assignedCards}}(它的數組對象) –

1

既然你有對象而不是數組,它必須以不同的方式做到這一點。在ng-repeat中使用(key, value),它會給你當前key迭代對象對象key和它的值。

<ul ng-repeat="(key, value) in assignedCards"> 
    <div> 
     <span ng-if="key=='name'">{{value}}</span> 
     <span ng-if="key=='_id'">{{value}}</span> 
    </div> 
    <li ng-if="key=='boardcards'" ng-repeat="item in value.Author"> 
     {{item}} 
    </li> 
</ul> 

Demo Here

以上是爲了說明,在簡單的&推薦版本將沒有你的慾望對象上使用ng-repeat而不是使用ng-repeat在整個模型。

<ul> 
    <div> {{assignedCards.name}} {{assignedCards._id}} </div> 
    <li ng-repeat="item in assignedCards.value.Author"> 
     {{item}} 
    </li> 
</ul> 
+0

嘿,我編輯你可以看看嗎? –

0

NG-重複需要boardcards從在第一回路assignedCards。所以在內部循環使用卡。作者而不是card.boardcards。作者

<ul ng-repeat="card in assignedCards"> 
    <div> 
     {{card.name}} {{card._id}} 
    </div> 
     <li ng-repeat="item in card.Author">{{item}}</li> 
    </ul>