javascript - AngularJs。使用 ng Repeat 和 ng switch 渲染表

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>

应该有两列 - 第一列应该是 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>