AngularJs。用ng重复和ng开关渲染表格

Question

我在使用angularjs指令尝试渲染两列的表格。

<table> 
<tr ng-repeat="message in messages" > 
    <td ng-switch-on="message.network" ng-switch when="twitter" ng-controller="TweetController"> 
     <span> 
      <input type="checkbox" name="active" ng-checked="{{message.isPublished}}" data-id="{{message.socialId}}" ng-click="publishMessage($event)" /> 
     </span> 
     <span> 
      <img src="{{message.authorPicture}}" /> 
     </span> 
     <span>{{message.createdAt}}</span> 
     <span>{{message.network}}</span> 
     <span>{{message.text}}</span> 
    </td> 
    <td ng-switch-on="message.network" ng-switch when="facebook" ng-controller="FacebookController"> 
     <span> 
      <input type="checkbox" name="active" ng-checked="{{message.isPublished}}" data-id="{{message.socialId}}" data-createdAt="{{message.createdAt}}" ng-click="publishMessage($event)" /> 
     </span> 
     <span> 
      <img src="{{message.authorPicture}}" /> 
     </span> 
     <span>{{message.createdAt}}</span> 
     <span>{{message.network}}</span> 
     <span>{{message.text}}</span> 
    </td> 
</tr> 
</table> 

应该有2列 - 第一个应该是twitter消息，第二个应该是facebook的帖子。但在我的情况下，同样的消息呈现在两列（像这样http://puu.sh/5oHT7.png）。我做错了什么？

Answer 1

为了简单起见，只是重组模式：

$scope.messages = [ 
    [ 
     { 
      "network": "twitter", 
      ... 
     }, 
     { 
      "network": "facebook", 
      ... 
     } 
    ], 
    [ 
     { 
      "network": "twitter", 
      ... 
     }, 
     { 
      "network": "facebook", 
      ... 
     } 
    ]  
] 

HTML：

<table> 
    <tr ng-repeat="message in messages" > 
     <td ng-repeat="msg in message"> 
      <div ng-if="msg.network == 'twitter'"> 
       <div ng-controller="TweetController"> 
        ... 
        <span>{{msg.createdAt}}</span> 
        <span>{{msg.network}}</span> 
        <span>{{msg.text}}</span> 
       </div> 
      </div> 
      <div ng-if="msg.network == 'facebook'"> 
       <div ng-controller="FacebookController"> 
        ... 
        <span>{{msg.createdAt}}</span> 
        <span>{{msg.network}}</span> 
        <span>{{msg.text}}</span> 
       </div> 
      </div> 
     </td>  
    </tr> 
</table>