CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Sulatha Shetty
Sulatha Shetty

Reputation: 11

AngularJs Click to toggle a image button src in a table

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:

  1. Can't reset the image path again on click back.
  2. 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.

Upvotes: 0

Views: 1403

Answers (1)

AngularLover
AngularLover

Reputation: 364

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'));
            });

        }}});

Upvotes: 1

Related Questions