點擊鏈接時在angularjs中更新UI/JSON

我有一個div顯示來自我的JSON文件的數據。我用ng-repeat來顯示數據。點擊鏈接時在angularjs中更新UI/JSON

JSON文件由‪#‎GoogleSearchAPI返回。

爲數據的每一行顯示一條鏈接。現在，當我們點擊它時，我想「隱藏」那個鏈接。然後將值爲true的新JSON屬性isHidden添加到該特定行的JSON數據。

這是如何實現的？

這裏是link for jsfiddle。

當我們點擊「驗證」鏈接，該行應該更新，它的「Valida」鏈接應該消失。

來源

2014-07-17 Ali Naqvi

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>

來源

2014-07-17 23:31:58 sylwester

它的工作。謝謝 –

點擊鏈接時在angularjs中更新UI/JSON

回答

相關問題