[英]Loading new json url on button click and updating View in Angular
抱歉,這個問題已經存在,但我找不到。
我正在開發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? 還是應該以其他方式加載此數據?
編輯:更新為使用“ 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" />
在您的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)">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.