AngularJS根据ng-repeat中的条件设置按钮文本

Question

我正在尝试通过转换一段工作 jQuery/AJAX 代码来学习 Angular。它是一个表格内的事件查看器，基本上显示一条消息，其中包含根据条件“标记已读”或“标记未读”的按钮。我无法根据 activity.seen == 0 设置按钮文本.

// html
<div class="table-responsive" ng-controller="Activity">
    <table class="table table-bordered table-striped table-hover">
        <tbody>
            <tr ng-repeat="activity in activities" ng-class="{ 'activity-read': activity.seen == 1 }">
                <td><button class="btn btn-default"><span ng-bind="buttonText"></span></button></td>
                <td>{{ activity.content }}</td>
            </tr>
    </table>
</div>

// controller
function Activity($scope, $http, $templateCache)
{
    $http.get('/activity/get').success(function(response, status)
    {
        $scope.activities = response;

        angular.forEach($scope.activities, function(activity)
        {
            $scope.buttonText = activity.seen == 0 ? 'Mark Read' : 'Mark Unread';
        });
    });
}

这只是设置 buttonText到 activity.seen 的最后一个值虽然有条件。那么如何在初始加载时将正确的文本动态绑定(bind)到每一行的按钮。

我认为这应该有双向绑定(bind)，因为我还需要在单击后根据 activity.seen 的新值更新按钮文本将通过 $http 发布到更新方法.

Answer 1

我认为这应该做你想要的:

    <button ng-click='activity.seen = !activity.seen'>
        <span>{{activity.seen ? 'Mark unread' : 'Mark read'}}</span>
    </button>

Fiddle