更新角度范围对象中的单个项目 [英] Updating a single item in angular scope object

问题描述

我正在为Ionic应用程序上的图片创建一个类似的功能。

I am creating a like function for pictures on an Ionic app.

如果请求是喜欢或不同，我可以返回类似的计数和真或假一张照片。

I can return a like count and true or false for if the request was to like or unlike a photo.

我的照片上有一个功能，可以在我的控制器中调用一个帖子（双击）

I have a function on my photos which calls a post action in my controller (the on double tap)

<div ng-repeat="update in updates" class="custom-card">
  <div ng-show="{{update.image}}" class="image">
    <img on-double-tap="likeUpdate({{update.data.id}})" class="full-image" ng-src="https://s3-eu-west-1.amazonaws.com/buildsanctuary/images/{{update.image.name}}" imageonload>
  </div>
  <div class="action-bar">
    <div class="left">
        <i ng-class="liked ? 'ion-ios-heart red' : 'ion-ios-heart-outline'"></i><span>like</span>
    </div>
  </div>

如果是单次更新显示，我会简单地更新'更新'范围，它会工作。但我有一张照片列表，用户可以双击任何人。我需要的是能够更新更新范围，但仅限于一次更新，而不是整个更新。

If this was a single update shown, I would simple update the 'update' scope and it would work. But I have a list of photo's shown and the user can double tap on anyone. What I need is to be able to update the scope of updates but only for a single update and not the whole lot.

我在控制器中的功能：

$scope.likeUpdate = function(update_id) {
    console.log("clicked");
    $http.post( $rootScope.apiURL + 'likeupdate', {
        update_id : update_id,
        user_id : $rootScope.currentUser.id
    }).success(function(update, response){
       // update the specific ng repeat item scope?
    });
}

这是否有角度方式？

推荐答案

不要传递 id ，传递整个更新进入你的处理程序，你可以在里面更改它，如下所示：

Don't pass the id, pass the whole update into your handler so you can change it inside, something like this:

<img on-double-tap="likeUpdate({{update}})" ... >

和控制器：

$scope.likeUpdate = function(update) {
    console.log("clicked");
    $http.post( $rootScope.apiURL + 'likeupdate', {
        update_id : update.data.id,
        user_id : $rootScope.currentUser.id
    }).success(function(result, response){
       update.xxx = ...
    });
}

一个简单的可运行示例：

A simple runnable example:

angular.module('myApp', [])
  .controller('MyController', ['$scope', function($scope) {
     $scope.updates = [{'name':'one', count: 2}, {'name':'two', count:3}];
     $scope.likeUpdate = function(update) {
       // this doesn't work:
       update = {'name': 'test', count: update.count+1};
       // this works:
       update.name = 'test';
       update.count += 1;
     };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">
  <div ng-repeat="update in updates" class="custom-card">
    <div ng-click="likeUpdate(update)">{{update.name}} - {{update.count}}</div>
  </div>
</div>

这篇关于更新角度范围对象中的单个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！