表单 – 使用带有anglejs的链接标签提交表单
发布时间:2020-12-14 18:48:13 所属栏目:资源 来源:网络整理
导读:我还是有角度的.我一直在尝试制作一个自定义按钮并将其附加到我的表单,而不是使用常规按钮.我已经尝试了几种方法,到目前为止,他们都没有工作得很好.现在当我输入输入字段中的内容时,我将“结果”视图完美地加载到主页面.但是当我点击搜索按钮“a”链接标签时
我还是有角度的.我一直在尝试制作一个自定义按钮并将其附加到我的表单,而不是使用常规按钮.我已经尝试了几种方法,到目前为止,他们都没有工作得很好.现在当我输入输入字段中的内容时,我将“结果”视图完美地加载到主页面.但是当我点击搜索按钮“a”链接标签时,视图加载会立即消失.以及浏览器的位置更改为“结果”,然后只返回“/#/”.我不知道为什么会造成这个.
这是我的html: <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> 这里是我的模型和ngjs控制器: 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; }); 解决方法
好,我觉得很蠢.我刚刚找到解决方案,撞了我的头几个小时.虽然这在任何网站上从来没有提到过.所有我需要的是从< a href =“#”id =“search-btn”ng-click =“submitForm()”>中删除“#”.现在它的作用就像魅力.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |