Angularjs切换图像onclick

发布时间：2020-12-17 17:52:37 所属栏目：安全来源：网络整理

导读：我正在尝试在用户点击它时切换按钮图像.如果可能的话,我更喜欢使用 angularjs而不是 jquery.现在我有一个可以在点击时切换图像的工作版本,唯一的问题是它会在点击时更改所有图像.如何缩小范围或传递img元素的src属性？ div ng-repeat="merchant in merchants

我正在尝试在用户点击它时切换按钮图像.如果可能的话,我更喜欢使用 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';
        }
    }
});

我可以将img src属性传递给toggleImage(this.img.src)或类似的函数吗？

解决方法

你想要的是每个追随者的新范围.正如您的代码所代表的那样,所有跟随者都只引用了一个范围.

一个简单的答案是创建一个附加到每个跟随者的新控制器：

<div class="followrow" ng-controller="ImageToggleCtrl">...</div>

然后将图像切换逻辑移动到该新控制器：

app.controller('ImageToggleCtrl',function($scope) {
  $scope.followBtnImgUrl = '/img1';
  $scope.toggleImage = function() { /* the toggling logic */ };
});

现在,将为每一行实例化一个新范围,并且图像将独立切换.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!