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.