angularjs-1.4 一个奇怪的问题

小-文 2015-07-08 03:31:36
最近本来是想学习一下angularjs,结果刚动手写一个小的demo就遇到一个让我费解的问题,点击按钮之后总是自动刷新页面。angularjs用的版本是1.4,boot用的版本是3.2,效果图如下:
页面form.html:
<!DOCTYPE html>
<html ng-app="UserInfoModule">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../res/bootstrap/bootstrap.css">
<script type="text/javascript" src="../res/angularJs/angular-1.4.min.js"></script>
<script type="text/javascript" src="../javascripts/form/form.js"></script>

<title>表单测试</title>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">双向数据绑定</div>
</div>
<div class="panel-body">
<div class = "row ">
<div class="col-md-12">
<form action="" class="form-horizontal" role="form" ng-controller="userInfoCtrl">
<div class="form-group">
<label class="col-md-2 control-lable">Email:</label>
<div class = "col-md-4">
<input type="email" class="form-control" placeholder="请输入邮箱地址" ng-model="userInfo.email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-lable">PassWord:</label>
<div class = "col-md-4">
<input type="password" class="form-control" placeholder="请输入password" ng-model="userInfo.password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="userInfo.autoLogin"> 自动登录
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" ng-click="getFormData()">获取FormData</button>
<button class="btn btn-default" ng-click="setFormData()">设置FormData</button>
</div>
</div>
</form>
</div>
</div>
</div>

</div>

</body>
</html>

form.js:
var userInfoModule = angular.module("UserInfoModule",[]);
userInfoModule.controller('userInfoCtrl',['$scope',function($scope){
$scope.userInfo= {
email:"894904692@qq.com",
password:"123456",
autoLogin:true
}
$scope.getFormData = function(){
console.log($scope.userInfo.email);
}
$scope.setFormData = function(){
$scope.userInfo= {
email:"403288325@qq.com",
password:"123",
autoLogin:false
}
}
}]);

现在每次点击‘设置FormData’按钮,效果总是一闪而过,又恢复成原始效果了,请各位指点一下。
...全文
253 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
雷恩特 2015-07-22
  • 打赏
  • 举报
回复
按钮在表单范围内,提交了表单啊, <form action="" class="form-horizontal" role="form" ng-controller="userInfoCtrl"> 然后控制器的范围又是表单范围,没提交一次相当于又初始化控制器,所有值总是初始化的值
小-文 2015-07-08
  • 打赏
  • 举报
回复
自己发现解决的方式了,但是原因不明白 只要把<button>标签转换成<input type="button">就没有问题了

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧