AngularJs單擊以切換表格中的圖像按鈕src

Question

我正在使用以下腳本在angularjs中綁定動態表：

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

我已經使用此腳本來綁定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. 單擊同一按鈕agian會將'selected.png'字符串附加到圖像路徑。

誰能指導我？ 如果需要提供更多詳細信息，請告訴我。

Answer 1

基本上，您應該將DOM操縱轉換為指令。 在指令中，您可以使用鏈接函數訪問特定的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'));
 }

如果要切換圖像，則必須設置一個標志並獲取特定圖像。 提示u應該與指令的鏈接功能一起使用。 然后，您可以獲得所有特定圖像。 並輕松處理它們。 指令如下所示：

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

        }}});