AngularJs中的ng-submit不起作用
[英]ng-submit in angularJs is not working
问题描述
I am relatively new in angularJs. 
我在angularJ中相对较新。 I am working with a search field where search will execute with the "ng-submit", but ng-submit is not working. 我正在使用“ ng-submit”执行搜索的搜索字段，但是ng-submit无法正常工作。 Here is my template (only the search portion): 这是我的模板（仅搜索部分）：
<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>
and the associated angularJS 和相关的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>
I am pretty sure the problem is occurring in the angularJs ng-submit portion. 我很确定问题是在angularJs ng-submit部分发生的。 But can't fix it out properly. 但是无法正确解决。 I am pretty sure because if I manually write the url for search then it shows results but if I try to search the result by pressing enter the search gives no response. 我很确定，因为如果我手动编写要搜索的网址，那么它会显示结果，但是如果我尝试通过按Enter键搜索结果，则搜索不会给出任何响应。 Please help me to fix this problem. 请帮助我解决此问题。
5 个解决方案
解决方案1
2 2013-11-25 06:28:26
Well there is a lot of useless code up there, but i created a plunker 嗯，那里有很多无用的代码，但是我创建了一个插件
http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview
EDIT: SORRY posted wrong link! 编辑：抱歉发布了错误的链接！
which gives some advice, maybe you forgot to attach the controller to your html like ng-controller="navController" 这给出了一些建议，也许您忘记了将控制器附加到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>
On submit it does the search, but i cannot tell what that url is because u used some kind of template mixin, please avoid mixing template and Javascript 提交时会进行搜索，但是我无法确定该网址是什么，因为您使用了某种模板mixin，请避免将模板和Javascript混合使用
解决方案2
0 2014-01-03 12:15:58
Have you put id="anyName" to tag? 您是否已将id =“ anyName”标记？
If so it should work 如果是这样，它应该工作
Thanks, Sameer 谢谢，Sameer
解决方案3
0 2014-06-21 01:00:38
You can try to insert into the 'form' with type = "submit" button to the action and leaves it hidden. 您可以尝试使用type =“ submit”按钮将“动作”插入“表单”并将其隐藏。 this eg: 这例如：
<button type="submit"
data-ng-hide="true"
data-ng-click="save()"/>
解决方案4
0 2015-03-12 00:25:19
Here is index.html : 这是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>
I left the original get and post requests alone, except that I changed it so that it would return a promise. 我保留了原始的获取和发布请求，只是我更改了请求以使其返回承诺。 I couldn't get the original search working because I wasn't sure what it was trying to accomplish. 我无法进行原始搜索，因为我不确定它要完成什么。 I cleaned up the project, employed some "best practices", and got the angular directives working. 我清理了项目，采用了一些“最佳实践”，并且使角度指令起作用了。 This won't benefit the person who submitted the question, but might help somebody else coming along with a similar problem. 这不会使提交问题的人受益，但可能会帮助其他遇到类似问题的人。 Here is the script file: 这是脚本文件：
(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
Had the same problem and ngSubmit seems to work better with objects, convert your ng-model to foo.term and access it in the controller as $scope.foo.term. 遇到相同的问题，并且ngSubmit似乎可以更好地与对象一起使用，请将ng-model转换为foo.term并在控制器中将其作为$ scope.foo.term进行访问。
This will work. 这将起作用。
To test if you're binding correctly, 为了测试您是否正确绑定，
Underneath the input, do something like {{ foo.term }} and see value updating 在输入下方，执行类似{{foo.term}}的操作，然后查看值更新
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.