Question

我的数据库中有很多“广告系列”：

{"name" : "Apple", "status" : "active"}
{"name" : "Orange", "status" : "paused"}

我已经在Angular中显示了它们：

<span ng-switch on="campaign.status"> 
<a ng-switch-when="active" ng-click='setStatus($index, "paused")'>Pause</a>
<a ng-switch-when="paused" ng-click='setStatus($index,"active")'>Activate</a>
</span>

然后在我的控制器中，我使用API更新服务器数据库的状态（返回更新条目的JSON。

$scope.setStatus = function(index, newstatus) {

    var item = $scope.campaigns[index];
    var url = 'api.mysite.com/' + newstatus + '/' + item._id.$oid;

    if (! $scope.isComplete(item) )
    {
        $http({method: 'GET', url: url}).  
        success(function(data, status, headers, config) { 
           $scope.campaigns[index] = data; 
          }). error(function(data, status, headers, config) {
           console.log('Error communicating with the server.');
          }); 
    }
}

变量campaigns是控制器初始化时从服务器检索到的所有广告系列的数组：

$scope.connection = $resource('api.mysite/getallcampaigns');
$scope.campaigns = $scope.connection.query();

这似乎已经非常混乱了，我很确定我正在使用AngularJS错误:(主要的是我将控制器中的元素索引传入控制器，如果我重新启动对阵列进行排序。我怎样才能让Angular很好地为我做好准备？这样做的最小和正确方法是什么？

Answer 1

将广告系列传递到setStatus（）而不是索引。修改成功回调中的广告系列属性：

<a ng-switch-when="active" ng-click='setStatus(campaign, "paused")'>Pause</a>

$scope.setStatus = function (campaign, newstatus) {
   ...
   success(function(data, status, headers, config) { 
       campaign.status = data.status;

不要在成功回调中重新分配整个数组 - 这可能会破坏你视图中的数据绑定。
即，我认为这不会起作用：campaign = data

您可以定义一个$ resource对象，它可以处理获取初始数据数组和修改单个数组项。请参阅$resource API page上的“信用卡资源”示例。请注意数组cards（分配了query（）的结果）的每个项目也可以是$ save（）d。

如何在AngularJS中单击后更新模型？

1 个答案: