javascript - AngularJs 单击以切换表格中的图像按钮 src

Question

我使用以下脚本在 angularjs 中绑定(bind)动态表:

$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>

我用过this绑定(bind) imagebutton src 的脚本。现在，我想在点击时更改特定图像按钮的src。我尝试过以下方法，

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

但是，它有很多问题。示例:

1. 点击返回时无法再次重置图像路径。
2. 再次单击同一按钮会将“selected.png”字符串附加到图像路径。

有人可以指导我吗？如果我需要提供更多详细信息，请告诉我。

Answer 1

基本上你应该将 DOM-Manipulation 交换为指令。在指令中，您可以使用链接函数来访问特定的 DOM 元素。但是要解决您的问题，您只需使用 $scope.$apply 它“强制”操作

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

如果你想切换图像，你必须设置一个标志并获取特定的图像。提示您应该使用指令的链接功能。然后你就可以获得所有特定的图像。并轻松处理它们。指令如下所示:

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

        }}});