2016-11-27 7 views
0
var App = angular.module('myApp', []); 

App.controller('myCtrl', function($scope, $http) { 
    $http.get("http://api.com/&keywords=influence marketing") 
    .then(function(response) { 
     $scope.myData = response.data.influencers; 
    }); 
});  

上記のコードでは角の正しい情報がロードされていますが、検索フォームから新しいキーワードparamでこれを再読み込みします。角度1の検索後のコンテンツの更新

$("#search").submit(function(event) { 
    // Stop form from submitting normally 
    event.preventDefault(); 
    //$("#searchresults").empty(); 

    // Get some values from elements on the page: 
    var $form = $(this), 
    terms = $form.find("input[name='query']").val(), 
    url = "http://api.com/&keywords="; 


//output url+terms; 

    }); 
+1

なぜあなたはjQueryと角度を混ぜていますか?それは純粋な角度でそれを行う方が簡単でしょう – maurycy

+0

角度でこれを行うための最良の方法は何でしょうか? – Blynn

答えて

0

ここではすべてを角度で行う簡単な方法です。

あなたは私が$ HTTP

のparams使用方法に気づくことができます:$ scope.form、

formモデルにだものはGETでURL変数として送信されることを確認しますリクエスト、あなたが好きなだけの入力を追加し、限りモデルは、それが

http://plnkr.co/edit/14e5852qLzethvZLXHG8?p=preview

を掲載させていただきます form.*になるようにすることができますので、

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope, $http) { 
 
    $scope.submitThisForm = function() { 
 
    
 
    $http({ 
 
     url: 'api', 
 
     params: $scope.form, 
 
     method: 'GET' 
 
    }).then(function onSuccess(response) { 
 
     //do some magic with response from server 
 
    }) 
 
    } 
 
    $scope.logToStackoverflow = function() { 
 
    console.log($scope.form) 
 
    } 
 
});
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <form name="myForm" ng-submit="submitThisForm()"> 
 
    <input type="text" ng-model="form.query"> 
 
    <br/> 
 
    <input type="text" ng-model="form.whatever"> 
 
    <br/> 
 
    <input type="submit" value="Submit form"> 
 
    <input ng-click="logToStackoverflow()" type="button" value="log output in stackoverflow" /> 
 
    </form> 
 
</body> 
 

 
</html>

関連する問題