AngularJs Click to toggle a image button src in a table

Question

I'm binding a dynamic table in angularjs using following script:

$http.get('../Services/ReportServ.asmx/GetSelectedIndex', {
    params: {InterviewId: InterviewId, EmpId: EmpId, ClientId: ClientId, Itype: '6'}
}).success(function (data) {
    var myjson = JSON.parse(data);
    $scope.ReportReviews = JSON.parse(myjson);
});

HTML:

<table id="tableReport" class="reportGrid">
    <tr>
        <th>
            <input type="checkbox" ng-model="ReportReviews.allReviewed" ng-change="selectAllInivited()"/></th>
        <th>Name</th>
        <th ng-repeat="Header in Headers">{{Header.QUESTIONName}}
        </th>
        <th>OverAll</th>
    </tr>
    <tr ng-repeat="ReportReview in ReportReviews" ng-class="{selected: ReportReview.isReviewChecked}">
        <td>
            <input type="checkbox" ng-model="ReportReview.isReviewChecked" ng-change="selectInivited(ReportReview)"/>
        </td>

        <td><a href="#">{{ReportReview.Name}}</a></td>
        <td ng-repeat="Header in Headers">
            <%--
            <a runat="server" id="a1" ng-show="HideResult(interview)"
               ng-class="{'checkedClass': (interview.R=='1' || interview.I=='1') , 'uncheckedClass': interview.I !='1'}">
                <img class="imgResult" src="../Lib/img/Result.png" height="55px"/></a>
            --%>

            <input type="image" id="imgResult{{$index}}" ng-src="{{GetFolderPath(ReportReview,Header)}}" prevent-default
                   ng-click="imgResultClick(ReportReview,Header)" height="20px"/>

        </td>
        <td>
            <input type="image" class="imgOverall" ng-src="{{GetOverallPath(ReportReview)}}" height="10px"/>
        </td>
    </tr>
</table>

I have used this script to bind imagebutton src. Now, I want to change the src of specific Image Button on click. I have tried the following method,

$scope.imgResultClick = function (fieldReport, fieldHeader) {
    var id = event.target.id;
    var imgPath = $('#' + id).attr('src');
    $('#' + id).attr('src', ImgPath);
    var output = imgPath.substr(0, imgPath.lastIndexOf('.')) || imgPath;
    $('#' + id).attr('src', output + '_selected.png');
}

However, it has lot of issues. Example:

Can't reset the image path again on click back.
clicking on the same button agian will append the 'selected.png' string to the image path.

Can anyone guide me? Please let me know, if I need to provide further details.

AngularLover · Accepted Answer · 2014-12-11 11:46:49Z

1

Basically u should swap DOM-Manipulation into a Directive. In the directive you cna use the link Function to access the specific DOM-Element.But to solve your problem, you have just to use $scope.$apply it "forces" the manipulation

$scope.imgResultClick = function (fieldReport, fieldHeader) {
 var id = event.target.id;
 var imgPath = $('#' + id).attr('src');
 $scope.$apply($('#' + id).attr('src', ImgPath));

 var output = imgPath.substr(0, imgPath.lastIndexOf('.')) || imgPath;
 $scope.$apply($('#' + id).attr('src', output+'_selected.png'));
 }

If u want to toggle the Image, u have to set a flag and get the specific image. A tip u should work with directives' link function. Then u can get all the specific images. And handle them easily. A directive looks like:

  app.directive('test', function() {
    return {
        restrict: 'AE',
        link: function(scope, elem, attrs, event) {
            elem.bind('click', function() {
                //your logic to the image
                var id = event.target.id;
                var imgPath = $('#' + id).attr('src');
                $scope.$apply($('#' + id).attr('src', ImgPath));

                var output = imgPath.substr(0, imgPath.lastIndexOf('.')) || imgPath;
                $scope.$apply($('#' + id).attr('src', output+'_selected.png'));
            });

        }}});

edited Dec 11, 2014 at 11:46

answered Dec 11, 2014 at 11:18

AngularLover

3741 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sulatha Shetty Over a year ago

Thanks for answer. However the provided solution is not working. first ImgPath not defined error. changed it to imgPath to get it worked at the first click, on second click of same element, the src should need to get reverted to the original image, which is not happening, and also clicking on the other images will also needed to reset the rest of image buttons src.

Collectives™ on Stack Overflow

AngularJs Click to toggle a image button src in a table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related