4

ユーザーがクリックしたときにボタンの画像を切り替えようとしています。可能であれば、jquery の代わりに angularjs を使用することを好みます。現在、クリックすると画像を切り替える作業バージョンがありますが、唯一の問題は、クリックするとすべての画像が変更されることです。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) などの関数を渡すことはできますか?

4

3 に答える 3

5 
<div ng-repeat="merchant in merchants">
  <div class="followrow">
    <a ng-click="toggleImage(merchant)"><img id="followbutton" ng-src="{{merchant.imgUrl}}"  />
    </a>
  </div>
</div>

。

app.controller('FollowCtrl', function CouponCtrl($scope) {
    $scope.followBtnImgUrl = '/sth.jpg'
    $scope.merchants = [{imgUrl: "img1.jpg", name:"sdf"}, 
                         {imgUrl: "img2.jpg", name: "dfsd"}];


     $scope.toggleImage = function(merchant) {
         if(merchant.imgUrl === $scope.followBtnImgUrl) {
             merchant.imgUrl = merchant.$backupUrl;
         } else {
             merchant.$backupUrl = merchant.imgUrl;
             merchant.imgUrl = $scope.followBtnImgUrl;
         }
    };
});
于 2013-02-15T06:58:20.183 に答える
0

クリック可能な画像を 2 つ追加しました。

<div ng-app="FormApp" ng-controller="myController" max-width="1150px;" width="1150px;" >
    <input ng-show="ShowDown" type="image" style="width:250px; height:40px;" src="~/Content/Images/contactShow.png" ng-click="ShowHide()"/>
    <input ng-show="ShowUp" type="image" style="width:250px; height:40px;" src="~/Content/Images/contactHide.png" ng-click="ShowHide()" />
</div>

お互いの可視性を切り替えます。ページの読み込み時に、一方が表示され、一方が表示されず、両方のクリック可能な画像が同じ関数を呼び出します。

<script type="text/javascript">
    var app = angular.module('FormApp', [])
    app.controller('myController', function ($scope) {
        $scope.ShowDown = true;
        $scope.ShowUp = false;

        $scope.ShowHide = function () {
            $scope.ShowDown = $scope.ShowDown ? false : true;
            $scope.ShowUp = $scope.ShowUp ? false : true;
        }
    });
</script>
于 2016-04-04T07:58:21.937 に答える