[英]Loading new json url on button click and updating View in Angular
Sorry if this question already exists but i could not find it. 抱歉,这个问题已经存在,但我找不到。
I'm working on an Angular project, and I have loaded a external JSON file using http. 我正在开发Angular项目,并且已经使用http加载了外部JSON文件。 This data is displayed using ngRepeat.
使用ngRepeat显示此数据。
I would like to load the file again using different parameters when a button is clicked and update ngRepeat 我想在单击按钮时使用不同的参数再次加载文件并更新ngRepeat
JavaScript: 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 HTML
<div ng-repeat="marker in markersAll">
<h4>{{marker.org}}</h4>
</div>
<select id="Category_Selection">
...
</select>
<input type="button" onClick="searchLocations()" value="Search"/>
I have tried wrapping the JS in a function an calling it when the button is click, but that didn't work. 我试图将JS包装在一个函数中,然后单击按钮时调用它,但这没有用。 How can I update $scope.MarkersAll using a new http GET request?
如何使用新的http GET请求更新$ scope.MarkersAll? Or is there a different way I should be loading this data?
还是应该以其他方式加载此数据?
edit: updated to use ' ng-click
' instead of ' onClick
'. 编辑:更新为使用“
ng-click
”而不是“ onClick
”。
Btw, it's a good practice to use controllerAs syntax instead of binding directly to $scope. 顺便说一句,使用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" />
In your angular js code
you can try following: 在您的
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;
});
And in your html
code you can add this: 在您的
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.