ng-submit在angularJs中不起作用

我在angularJs中比較新。我正在使用「ng-submit」執行搜索的搜索字段，但ng-submit不起作用。這裏是我的模板（只搜索部分）：ng-submit在angularJs中不起作用

<form class="navbar-form navbar-right" ng-submit="search()"> 
    <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input> 
</form>

和相關angularJS

<script> 
app.controller("NavCtrl", ['$scope', '$http', '$location', '$q','$timeout', function NavCtrl($scope, $http, $location, $q, $timeout) { 
    $scope.results = ["Test"]; 
    $scope.term = ""; 
    $scope.reqs = "5"; 
    $scope.pics = "45"; 
    $scope.ddata = "asdasd"; 
    $scope.ddata = $http.post("{% url 'get-nav-info' %}").success(
     function(result){ 
      //$scope.reqs = result.data.data.num_request; 
      //$scope.pics = result.data.data.num_photo; 
      return result.data; 
     } 
    ); 
    //$scope.reqs = $scope.ddata.num_request; 
    //$scope.pics = $scope.ddata.num_photo; 


    $scope.search = function(){ 
     //alert("test"); 
     //$location.absUrl() 
     //$location.path("{% url 'search-term-show' %}?term="+$scope.term).replace(); 
     $http.get("{% url 'search-term-show' %}?term="+$scope.term).success(function(result){ 
       return result.data; 
     }); 
    //$scope.$apply(); 
    } 
}]); 

</script>

我敢肯定這個問題在angularJs發生NG提交部分。但無法正確解決它。我很確定，因爲如果我手動編寫搜索網址，它會顯示結果，但如果我嘗試按搜索結果搜索沒有迴應。請幫我解決這個問題。

來源

2013-11-25 zogo

那麼有很多無用的代碼在那裏，但我創建了一個plunker

http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview

編輯：對不起張貼錯誤的鏈接！

這給一些建議，也許你忘了把控制器接到你的HTML像ng-controller="navController"

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

 
app.controller('navController', ['$scope', '$http', function($scope, $http) { 
 
    
 
    $scope.search = function() { 
 
     console.log("search") 
 
     $http.get($scope.term).success(function(result) { 
 
     window.console.log("result"); 
 
     return result.data; 
 
     }); 
 
    
 
    } 
 
    
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script> 
 
    <script src="script.js"></script> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="navController"> 
 
     <form ng-submit="search()"> 
 
      <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input> 
 
      <input type="submit"> 
 
     </form> 
 
    </div> 
 
    </body> 
 
<html>

在提交進行搜索，但我不能告訴大家，網址是什麼原因你使用了某種模板混合，請避免混合模板和Javascript

來源

2013-11-25 06:28:26 pfried

你把id =「anyName」給標記了嗎？

如果是的話它應該工作

謝謝，薩米爾

來源

2014-01-03 12:15:58 samdubey

你可以試着插入「形式」與類型=「提交」按鈕的動作和留下它隱藏起來。此例如：

<button type="submit" 
      data-ng-hide="true" 
      data-ng-click="save()"/>

來源

2014-06-21 01:00:38 frekele

這裏是index.html：

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
<script data-require="[email protected]*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<link data-require="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
<script data-require="[email protected]" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="[email protected]*"></script> 
<link rel="stylesheet" href="style.css" /> 
<script src="script.js"></script> 
</head> 

<body> 
<div ng-controller="NavCtrl"> 
    <form ng-submit="search()"> 
    <input class="col-xs-9" type="text" placeholder="Search" ng-model="term" /> 
    <input type="submit" ng-submit="search()" /> 
    </form> 
</div> 

</body> 

</html>

我離開原來的GET和POST請求孤獨的，我改變了它，這樣它會返回一個承諾。我無法獲得原始搜索的工作，因爲我不確定它試圖完成什麼。我清理了這個項目，採用了一些「最佳實踐」，並使角度指令起作用。這對提交問題的人沒有好處，但可能會幫助其他人出現類似問題。下面是該腳本文件：

(function(){ 

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

app.controller('NavCtrl', NavCtrl); 

function NavCtrl($scope, $http, $location) { 

$scope.results = ["Test"]; 
$scope.term = ""; 
$scope.reqs = "5"; 
$scope.pics = "45"; 
$scope.ddata = "asdasd"; 
$scope.ddata = $http.post("{% url 'get-nav-info' %}").then(
    function(result) { 
// $scope.reqs = result.data.data.num_request; 
// $scope.pics = result.data.data.num_photo; 
    return result.data; 
}); 

//$scope.reqs = $scope.ddata.num_request; 
//$scope.pics = $scope.ddata.num_photo; 

$scope.search = function() { 
    alert("search function was called"); 
    //alert("test"); 
    $location.absUrl(); 
    $location.path("{% url 'search-term-show' %}?  term="+$scope.term).replace(); 
    $http.get("{% url 'search-term-show' %}?term="+$scope.term) 
    .then(function(result) { 
    //Successful 
    console.log(result.data); 
    }, 
    function() { 
    //Error 
    console.log("Could not locate term."); 
    }); 

return result.data 
}; 

} 
})();

來源

2015-03-12 00:25:19 steveo

有同樣的問題，並ngSubmit似乎與對象更好地工作，將您的NG-模型foo.term和訪問控制器爲$ scope.foo.term。

這將工作。

要測試，如果你正確地結合，

下方的輸入，這樣做{{foo.term}}，發現價值更新

來源

2015-12-17 18:10:23 Xiaoerge

ng-submit在angularJs中不起作用

回答

相關問題