AngularJs中的ng-submit不起作用
[英]ng-submit in angularJs is not working
問題描述
我在angularJ中相對較新。 我正在使用“ ng-submit”執行搜索的搜索字段，但是ng-submit無法正常工作。 這是我的模板（僅搜索部分）：
<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-submit部分發生的。 但是無法正確解決。 我很確定，因為如果我手動編寫要搜索的網址，那么它會顯示結果，但是如果我嘗試通過按Enter鍵搜索結果，則搜索不會給出任何響應。 請幫助我解決此問題。
5 個解決方案
解決方案1
2 2013-11-25 06:28:26
嗯，那里有很多無用的代碼，但是我創建了一個插件
http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview
編輯：抱歉發布了錯誤的鏈接！
這給出了一些建議，也許您忘記了將控制器附加到ng-controller="navController"類的html上
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="angular.js@1.2.x" 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>
提交時會進行搜索，但是我無法確定該網址是什么，因為您使用了某種模板mixin，請避免將模板和Javascript混合使用
解決方案2
0 2014-01-03 12:15:58
您是否已將id =“ anyName”標記？
如果是這樣，它應該工作
謝謝，Sameer
解決方案3
0 2014-06-21 01:00:38
您可以嘗試使用type =“ submit”按鈕將“動作”插入“表單”並將其隱藏。 這例如：
<button type="submit"
data-ng-hide="true"
data-ng-click="save()"/>
解決方案4
0 2015-03-12 00:25:19
這是index.html ：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.1" 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="angular.js@*"></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>
我保留了原始的獲取和發布請求，只是我更改了請求以使其返回承諾。 我無法進行原始搜索，因為我不確定它要完成什么。 我清理了項目，采用了一些“最佳實踐”，並且使角度指令起作用了。 這不會使提交問題的人受益，但可能會幫助其他遇到類似問題的人。 這是腳本文件：
(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
};
}
})();
解決方案5
0
遇到相同的問題，並且ngSubmit似乎可以更好地與對象一起使用，請將ng-model轉換為foo.term並在控制器中將其作為$ scope.foo.term進行訪問。
這將起作用。
為了測試您是否正確綁定，
在輸入下方，執行類似{{foo.term}}的操作，然后查看值更新
angularjs-ng提交表單不能與動態生成的html一起使用
[英]angularjs - form ng-submit not working with dynamic generated form html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.