Question

我有一个显示来自我的JSON文件的数据的div。我已经使用ng-repeat来显示其中的数据。

JSON文件由‪#‎GoogleSearchAPI返回。

显示每行数据的一个链接。现在我想在点击它时“隐藏”该链接。并将值isHidden的新JSON属性true添加到该特定的JSON数据行。

如何实现这一目标？

这是link for jsfiddle。

当我们点击“验证”链接时，该行应该更新，并且它的“Valida”链接应该消失。

Answer 1

http://jsfiddle.net/d65wK/

JS：

angular.module('myModule', []).controller('SearchController', function ($scope, $http) {
    //alert('A');
    $scope.nextPage = false;
    $scope.allResultsCount = 0;
    $scope.hideLink = function (item) {
        item.isHidden = true;
    }
    $scope.searchGooglePatents = function () {
        $scope.googlePatentsResults = [];
        $scope.resultPerPage = 8;
        $scope.allResultsCount = 0;
        //gSearchText = $scope.searchForm.searchText;
        $http.jsonp('http://ajax.googleapis.com/ajax/services/search/patent?v=1.0&q=Plastic&rsz=' + $scope.resultPerPage + '&userip=192.168.10.22&callback=JSON_CALLBACK')
            .
        success(function (data) {
            if (data) {

                $scope.googlePatentsResults = JSON.parse(JSON.stringify(data));
                //Check if the link is added to the stub report...

                // alert('in if....');
                //                                    $timeout(function() {

                //                                    });





                //                            console.log($scope.googlePatentsResults);
                $scope.totalPages = $scope.googlePatentsResults.responseData.cursor.pages.length;
                $scope.allResultsCount = $scope.totalPages * $scope.resultPerPage;
                if ($scope.totalPages > 1) {
                    $scope.nextPage = true;
                    $scope.currentPage = 1;
                    $scope.previousPage = false;
                } else {
                    $scope.nextPage = false;
                    $scope.previousPage = false;
                }
            } else {
                console.log("no results");
            }
        }).error(function (err, data) {
            console.log("Error " + data);
        });
    }

    $scope.addToStubReport = function (jsonObject, gpSearch) {
        //alert('JsonObject ' + jsonObject);
        gpSearch.showValidateLink = true;
        jsonObject['showValidateLink'] = "false"
        alert("Here I want to refresh my list using AJAX. That if Valid is clicked on a row then that row should be updated. and it should not show the 'Valid' link. No call to the server should be made");
    }

});

HTML：

    <body ng-app="myModule" ng-controller="SearchController" ng-init="searchGooglePatents()">
    <div id="test" collapse="openGPDiv" class="panel-collapse collapse  panelHeight">
        <div style="overflow: auto;" class="panelHeight">
            <div class="panel-body" ng-repeat="gpSearch in googlePatentsResults.responseData.results">
                <table>
                    <tr>
                        <td width="90%">
                            <table style="text-align: left">
                                <tr>
                                    <td> <a ng-hide="gpSearch.isHidden" href="http://www.google.com/patents/{{gpSearch.patentNumber}}" target="_blank " ng-click="hideLink(gpSearch)">
                                        <p>{{gpSearch.title}}</p>
                                        </a> 
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>{{gpSearch.content}}</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td style="padding-left: 10px;">
                             <h3><a style="cursor: pointer; cursor: hand" ng-hide="gpSearch.showValidateLink" ng-click="addToStubReport('googlePatents',gpSearch)">Valid</a></h3>

                            <br/>
                             <h3><a style="cursor: pointer; cursor: hand" ng-show="true">Blacklist</a></h3>

                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <table width="100%">
            <tr>
                <td>
                    <div ng-show="nextPage"> <a ng-click="getOldData()" style="cursor: pointer; cursor: hand" ng-show="previousPage">Previous</a>
{{currentPage + " of " + totalPages}} <a ng-click="getNewData()" style="cursor: pointer; cursor: hand" ng-show="nextPage">Next</a>

                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>

单击链接时更新angularjs中的UI / JSON

1 个答案: