更新角度范围对象中的单个项目
[英] Updating a single item in angular scope object
本文介绍了更新角度范围对象中的单个项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在为一个 Ionic 应用程序上的图片创建一个 like 函数.
如果请求是喜欢或不喜欢照片,我可以返回喜欢计数和 true 或 false.
我的照片上有一个函数,它在我的控制器中调用 post 操作(双击)
<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 class="action-bar"><div class="left"><i ng-class="liked ? 'ion-ios-heart-red' : 'ion-ios-heart-outline'"></i><span>like</span>
如果这是显示的单个更新,我会简单地更新更新"范围,它会起作用.但是我有一个照片列表,用户可以双击任何人.我需要的是能够更新更新的范围,但只能更新单个更新,而不是全部更新.
我在控制器中的功能:
$scope.likeUpdate = function(update_id) {console.log("点击");$http.post( $rootScope.apiURL + 'likeupdate', {update_id : update_id,user_id : $rootScope.currentUser.id}). 成功(功能(更新,响应){//更新特定的 ng 重复项范围?});}
有角度的方法吗?
解决方案
不要传递 id
,将整个 update
传递到您的处理程序中,以便您可以更改它里面,是这样的:
和控制器:
$scope.likeUpdate = function(update) {console.log("点击");$http.post( $rootScope.apiURL + 'likeupdate', {update_id : update.data.id,user_id : $rootScope.currentUser.id}). 成功(功能(结果,响应){更新.xxx = ...});}
一个简单的可运行示例:
angular.module('myApp', []).controller('MyController', ['$scope', function($scope) {$scope.updates = [{'name':'one', count: 2}, {'name':'two', count:3}];$scope.likeUpdate = 函数(更新){//这不起作用:update = {'name': 'test', count: update.count+1};//这有效:update.name = '测试';更新计数 += 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>
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.
My function in controller:
$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?
});
}
Is there an angular way for this?
解决方案
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}})" ... >
And controller:
$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屋!