我正在尝试在用户点击它时切换按钮图像.如果可能的话,我更喜欢使用
angularjs而不是
jquery.现在我有一个可以在点击时切换图像的工作版本,唯一的问题是它会在点击时更改所有图像.如何缩小范围或传递img元素的src属性？
<div ng-repeat="merchant in merchants">
<div class="followrow">
<a ng-click="toggleImage()"><img id="followbutton" ng-src="{{followBtnImgUrl}}" /></a>
</div>
</div>
app.controller('FollowCtrl',function CouponCtrl($scope) {
$scope.followBtnImgUrl = '/img1'
$scope.toggleImage = function () {
if ($scope.followBtnImgUrl === '/img1.jpg') {
$scope.followBtnImgUrl = baseUrl + '/img2.jpg';
} else {
$scope.followBtnImgUrl = 'img1.jpg';
}
}
});
解决方法
你想要的是每个追随者的新范围.正如您的代码所代表的那样,所有跟随者都只引用了一个范围.
一个简单的答案是创建一个附加到每个跟随者的新控制器：
<div class="followrow" ng-controller="ImageToggleCtrl">...</div>
然后将图像切换逻辑移动到该新控制器：
app.controller('ImageToggleCtrl',function($scope) {
$scope.followBtnImgUrl = '/img1';
$scope.toggleImage = function() { /* the toggling logic */ };
});
现在,将为每一行实例化一个新范围,并且图像将独立切换.
