关于AngularJs数据交换的实现

评论 1 点赞 5 人气 1350

1.先写个html按钮

<a class="btn btn-info btn-xs" ui-sref="user.changePwd({uid: User.UserID})">修改密码</a>

ui-sref是跳转链接,相对路径:user文件夹下面的changePwd.html页面

传参数:{uid: User.UserID} or ui-sref = “页面({参数1:参数1值,参数2:参数2值,…})”


2.html表单页面


<header><i class="fa fa-fw fa-file"></i>注册新用户</header>

<section>

    <div class="container-fluid">

        <div class="row">

            <div class="col-sm-12">

                //提交到控制器里面的userHahaFormSubmit(user)方法

                <form class="form-horizontal" name="form" ng-submit="userHahaFormSubmit(user)" novalidate>

                    <div class="form-group">

                        <label class="col-sm-2 control-label" for="password">密码</label>

                        <div class="col-sm-3">

                            <input type="text" class="form-control" id="password" name="password" ng-model="user.password" placeholder="不能少于 3 位" ng-minlength="3" ng-maxlength="15" required>

                        </div>

                        <p class="col-sm-7 help-block" ng-show="form.password.$error.minlength || form.password.$error.maxlength">

                            <span class="text-danger">密码必须由字母、数字组成,长度范围(3-15)</span>

                        </p>

                    </div>

                    <hr/>

                    <div class="form-group">

                        <label class="col-sm-2"></label>

                        <div class=" col-sm-3">

                            <button type="submit" class="btn btn-primary btn-block" ng-disabled="form.$invalid">确认注册</button> {{msg}}

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

</section>



2.配置路由

backend.config(

    ['$urlRouterProvider', '$stateProvider', '$httpProvider', function ($urlRouterProvider, $stateProvider, $httpProvider) {

        /* 使用when来对一些不合法的路由进行重定向 */

        $urlRouterProvider.when('', '/home');


        /* 通过$stateProvider的state()函数来进行路由定义 */

        $stateProvider.state('user.changePwd', {

            url: '/changePwd/:uid',

            //or url:'/changePwd?uid'

            controller: 'userdlChangePwdHtmlFormController',

            templateUrl: 'tpl/user/changePwd.html'

        })


        $stateProvider.state('404', {

            url: '/404',

            templateUrl: '404.html'

        })

    }]

)

说明:state('跳转页面url',{url:带参数uid跳转url,controller:控制器名,templateUrl:静态页面地址})



3.写controller提交表单

//修改密码

backend.controller('userHahaFormController', function($scope, $http,$stateParams) { 

      $scope.captcha_id = '';

      $scope.userHahaFormSubmit = function(user) {

          user.uid = $stateParams.uid;//使用$stateParams获取uid的参数值

          $http({

              method: 'POST',

              url: '/index.php/backend/user/haha',//条件到haha接口

              headers: {'Content-Type': 'application/x-www-form-urlencoded'},

              data: $.param(user) //表单提交

          }).then(function(response) {

              console.log(response);

              var json_data = response.data;

              if (json_data.ret == 200) {

                  if (json_data.data.code == 0) {

                      window.location.href = '/backend/index.html#/user/list'; //成功跳转url

                  } else {

                      $scope.msg = "<span class='text-warning'>" + json_data.data.msg + "</span>"

                  }

              }

          }, function(response) {

              console.log(response)

              $scope.msg = "<span class='text-warning'>" + response.data.msg + "</span>"

          })


      }

  })

//  修改密码结束



*更多学习视频资料请关照博主的星球,扫一扫下方的星球二维码加入
更多学习视频资料请关照博主的星球,扫一扫下方的星球二维码加入

*更多区块链技术视频资料请关照博主的星球,扫一扫下方的星球二维码加入
更多区块链技术资料请关照博主的星球,扫一扫下方的星球二维码加入

*喜欢本文章觉得有帮助的话,扫个打赏码,给博主打赏个买菜钱$
喜欢本文章觉得有帮助的话,扫个打赏码,给博主打赏个买菜钱

留言板:
  1. cbbtop博客留言板-关于AngularJs数据交换的实现 jl

    lkjl

    回复