Question

很抱歉，如果这个问题已经存在，但我找不到。

我正在开发一个Angular项目，我已经使用http加载了一个外部JSON文件。使用ngRepeat显示此数据。

我想在单击按钮时使用不同的参数再次加载文件并更新ngRepeat

JavaScript的：

angular.module('App', [])
    .controller('ResultsCtrl', function($scope, $http) {
        $http.get(searchUrl).then(function(res){
            $scope.markersAll = res.data;     
        })
        .success(function(data, status, headers, config) {
            $scope.markersAll = res.data;
        })
        .error(function(data, status, headers, config) {
            // something went wrong
        });
});

HTML

<div ng-repeat="marker in markersAll">
    <h4>{{marker.org}}</h4>
</div>

<select id="Category_Selection">
    ...
</select>
<input type="button" onClick="searchLocations()" value="Search"/>

我已经尝试将JS包装在一个函数中，并在单击按钮时调用它，但这并不起作用。如何使用新的http GET请求更新$ scope.MarkersAll？或者我是否应该采用不同的方式加载此数据？

Answer 1

修改：已更新为使用“ng-click”代替“onClick”。

顺便说一句，使用controllerAs语法而不是直接绑定到$ scope是一个好习惯。

angular
  .module('App', [])
  .controller('ResultsCtrl', function($scope, $http) {
    $scope.markersAll = []; //initialize to empty array so ng-repeat doesn't complain
    $scope.searchLocations = searchLocations;

    searchLocations(); //perform a search on load

    function searchLocations() {
      $http.get(searchUrl).then(function(res) {
        $scope.markersAll = res.data;
      });
    }
  });

<div ng-repeat="marker in markersAll">
  <h4>{{marker.org}}</h4>
</div>

<select id="Category_Selection">
  ...
</select>
<input type="button" ng-click="searchLocations()" value="Search" />

Answer 2

在angular js code中，您可以尝试以下操作：

 angular.module('App', [])
 .controller('ResultsCtrl', function($scope, $http) {
    $http.get(SITE_URL).success(function(data) {
       $scope.markersAll=data;
    });
   $scope.myproject = function(marker) {
      $http.get(SITE_URL?marker="+marker).success(function(data){
        $scope.markersall1=data;
  });

在您的html代码中，您可以添加以下内容：

 <div ng-repeat="marker in markersAll">
   <h4>{{marker}}</h4>
 </div>

 <div ng-repeat="marker in markersAll1">/*data come using ajax on button click event*/
   <h4>{{marker}}</h4>
 </div>
 <select ng-model="marker">
   <option ng-repeat="marker in markersAll">{{marker}}</option>
 </select>
 <button  type="button" ng-click="myFunction(marker)">

按下按钮并加载新的json url并更新Angular中的View

2 个答案: