Forms 使用带有angularjs的链接标记提交表单
我对angularJS还是新手。我一直在尝试制作一个自定义按钮,并将其附加到我的表单中,而不是使用常规按钮。我尝试过几种方法,但到目前为止,没有一种效果很好。现在,当我在输入字段中按enter键时,我会将“结果”视图完美地加载到主页上。但当我点击搜索按钮“a”链接标签时,视图加载立即消失。以及浏览器的位置更改为“结果”,然后仅返回“/#/”。我不知道是什么原因造成的 这是我的html:Forms 使用带有angularjs的链接标记提交表单,forms,angularjs,Forms,Angularjs,我对angularJS还是新手。我一直在尝试制作一个自定义按钮,并将其附加到我的表单中,而不是使用常规按钮。我尝试过几种方法,但到目前为止,没有一种效果很好。现在,当我在输入字段中按enter键时,我会将“结果”视图完美地加载到主页上。但当我点击搜索按钮“a”链接标签时,视图加载立即消失。以及浏览器的位置更改为“结果”,然后仅返回“/#/”。我不知道是什么原因造成的 这是我的html: <div id="search-container" ng-controller="SearchCont
<div id="search-container" ng-controller="SearchController">
<form ng-submit="submitQuery()">
<div>
<input id="keywords" name="keywords" ng-model="query.keywords" placeholder="please enter query" value="" required/><br>
<a href="#" id="search-btn" ng-click="submitForm()"><img src="/Images/search-icon.png" alt="Search" title="Search" /></a>
</div>
</form>
</div>
我觉得自己很愚蠢。我撞了几个小时才找到解决办法。尽管这在任何网站上都没有提到过。我只需要从
中删除“#”。现在它像charm一样工作。您是否也可以将表单作为方法的参数传递,以检查表单有效性、显示错误等?现在,即使不删除#(如上所测试的那样),它也可以工作angular@1.6.9)
var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
$routeProvider.when('/results', {
templateUrl: 'PartialViews/results.html',
controller: 'ResultsController'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
bfapp.controller('ResultsController', function ($scope) {
});
bfapp.controller('SearchController', function ($scope, $location) {
$scope.query = { keywords: "" };
//on form submit
$scope.submitQuery = function () {
if ($scope.query.keywords !== null) {
$location.path('/results');
}
};
//on button click
$scope.submitForm = $scope.submitQuery;
});