將用戶輸入傳遞到$ http.get請求angularJS

Question

我目前正在嘗試將用戶輸入傳遞到我的$ http.get請求中。 我正在使用bootstrap和angular，但是由於試圖通過bootstrap模態傳遞兩個日期而感到困惑。 我目前有一個像這樣的控制器

app.controller('testCtrl', function($scope, $http){
  $http.get("website" + box1 + box2).then(function(r){
    $scope.Data = r.data;
  });
});

和引導中的模態

<div class="modal-header">
  <h4 class="modal-title">test</h4>
</div>
<div class="modal-body">
  <input id="box1" type="text"/>
  <input id="box2" type="text"/>
</div>
<div class="modal-footer">
  I don't know what to put here to pass it into angular
</div>

Answer 1

用這個：

app.controller('testCtrl', function($scope, $http){
  $scope.box1 = "";
  $scope.box2 = "";
  $http.get("website" + $scope.box1 + $scope.box2).then(function(r){
    $scope.Data = r.data;
  });
});
And a modal in bootstrap with

<div class="modal-header">
  <h4 class="modal-title">test</h4>
</div>
<div class="modal-body">
  <input ng-model="box1" id="box1" type="text"/>
  <input ng-model="box2" id="box2" type="text"/>
</div>
<div class="modal-footer">
  I don't know what to put here to pass it into angular
</div>

Answer 2

在控制器中

app.controller('testCtrl', function($scope, $http){
 $scope.submit = function(){
  $http.get("website" + $scope.box1 + $scope.box2).then(function(r){
    $scope.Data = r.data;
  });
 };
});

在引導模式html中，確保此HTML使用的是testCtrl控制器

<div class="modal-header">
  <h4 class="modal-title">test</h4>
</div>
<div class="modal-body">
  <input ng-model="box1" type="text"/>
  <input ng-model="box2" type="text"/>
</div>
<div class="modal-footer">
  <button ng-click="submit()" class="btn">Submit(or text you want to keep)</button>
</div>