我正在尝试通过转换一段有效的jQuery / AJAX代码来学习Angular。它是表内的活动查看器,基本上根据条件显示一条带有“标记为已读”或“标记为未读”按钮的消息。我在设置基于的按钮文本时遇到麻烦activity.seen == 0。
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条件的最后一个值。因此,如何在初始加载时将正确的文本动态绑定到每行的按钮。
buttonText
activity.seen
我认为这应该具有双向绑定,因为在单击按钮文本之后,我还需要根据按钮的新值来更新按钮文本,该新值activity.seen将通过张贴到更新方法中$http。
$http
我认为这应该做您想要的:
<button ng-click='activity.seen = !activity.seen'> <span>{{activity.seen ? 'Mark unread' : 'Mark read'}}</span> </button>
[**Fiddle**](http://jsfiddle.net/GruffBunny/gNYHt/)