Angularjs修改密码的实例代码

 更新时间:2017年05月26日 11:34:49   作者:沐吾  
这篇文章主要介绍了Angularjs修改密码的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下

修改密码逻辑思维

首先要输入旧的密码,判断旧的密码是否正确(后台判断)

其次输入新的密码,判断新密码格式(可增加)

最后判断新密码和确认密码输入是否一致

html部分

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label"><i class="importance">*</i>当前密码</label>
  <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="user.password">
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label"><i class="importance">*</i>新密码</label>
  <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="user.newPassword" ng-minlength="8" ng-maxlength="16" required>
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label"><i class="importance">*</i>确认新密码</label>
  <div class="col-sm-6">
   <input type="text" class="form-control" ng-model="password_again">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default x_submit" ng-click="changePassword()">保存设置</button>
  </div>
 </div>
</form>

AngularJS部分

.controller('userpswdCtrl', function($scope,Account,SweetAlert,$state,$localStorage){
 $scope.user = {}; //信息全部存在user里面
 $scope.changePassword = function(){
  if($scope.password_again === $scope.user.newPassword){  //如果两次密码输入一致
    $scope.user.accountId = $localStorage.accountId;   //获取用户id
    Account.modifyPassword($scope.user,function(data){  //修改密码
     console.log(data);
     SweetAlert.swal({
      title:'',
      text: "修改成功",
      type: "success",
      showCancelButton: false,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "是",
      cancelButtonText: "否",
      closeOnConfirm: true,
      closeOnCancel: true
     })
    },function(){

    })
  }
 }
})

以上所述是小编给大家介绍的Angularjs修改密码的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • AngularJS教程之环境设置

    AngularJS教程之环境设置

    本文主要介绍AngularJS环境设置,学习AngularJS的朋友肯定要设置开发软件的环境,这里详细介绍安装设置流程,有需要的朋友可以参考下
    2016-08-08
  • 从源码看angular/material2 中 dialog模块的实现方法

    从源码看angular/material2 中 dialog模块的实现方法

    这篇文章主要介绍了 从源码看angular/material2 中 dialog模块的实现方法,需要的朋友可以参考下
    2017-10-10
  • AngulaJS路由 ui-router 传参实例

    AngulaJS路由 ui-router 传参实例

    本篇文章主要介绍了AngulaJS路由 ui-router 传参实例 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS模仿Form表单提交的实现代码

    AngularJS模仿Form表单提交的实现代码

    本文通过一段实例代码给大家简单介绍了angularjs模仿form表单提交的方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-12-12
  • RequireJS 依赖关系的实例(推荐)

    RequireJS 依赖关系的实例(推荐)

    下面小编就为大家带来一篇RequireJS 依赖关系的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 实例详解AngularJS实现无限级联动菜单

    实例详解AngularJS实现无限级联动菜单

    这篇文章主要介绍了实例详解AngularJS实现无限级联动菜单的相关资料,需要的朋友可以参考下
    2016-01-01
  • AngularJS基础 ng-disabled 指令详解及简单示例

    AngularJS基础 ng-disabled 指令详解及简单示例

    本文主要介绍AngularJS ng-disabled 指令,这里帮大家整理了ng-disabled指令的基础指令,并附示例代码,有需要的小伙伴参考下
    2016-08-08
  • Angular浏览器插件Batarang介绍及使用

    Angular浏览器插件Batarang介绍及使用

    本篇文章主要介绍了Angular浏览器插件Batarang介绍及使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Angular设置别名alias的方法

    Angular设置别名alias的方法

    这篇文章主要介绍了Angular设置别名alias及打包命令的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 使用Angular-CLI构建NPM包的方法

    使用Angular-CLI构建NPM包的方法

    这篇文章主要介绍了使用Angular-CLI构建NPM包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论