大佬教程收集整理的这篇文章主要介绍了使用ui-router模块进行AngularJS多步骤验证,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我所遇到的问题是,父表单仅在所有子表单有效时才有效,但使用ui-router状态时,一次只会加载一个子表单.
的index.html
<!DOCTYPE html> <html ng-app="app"> <head> <script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script> <script src="//cdnjs.cloudFlare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script src="script.js"></script> </head> <body class="container-fluid"> <div ui-view> <ul class="list-unstyled"> <li><a ui-sref="edit.basic">Basic</a></li> <li><a ui-sref="edit.extended">Extended</a></li> </ul> </div> </body> </html>
的script.js
angular.module('app',['ui.router']). config(function($stateProvider) { $stateProvider.state('edit',{ abstract: true,url: '/edit/',templateUrl: 'edit.html',controller: function($scopE) { $scope.model = {}; } }). state('edit.basic',{ url: '/basic',templateUrl: 'basic.html' }). state('edit.extended',{ url: '/extended',templateUrl: 'extended.html' }); });
edit.html
<div class="row" ng-form="editForm"> <div class="col-xs-12"> <ul class="nav nav-tabs"> <li ui-sref-active="active"> <a ui-sref="edit.basic">Basic</a> </li> <li ui-sref-active="active"> <a ui-sref="edit.extended">Extended</a> </li> </ul> </div> <div class="col-xs-12" ui-view></div> <div class="col-xs-12"> <button type="button" class="btn btn-priMary" ng-disabled="editForm.$invalid">Save</button> </div> <div class="col-xs-12"> <hr> <tt>model = {{model}}</tt><br> <tt>editForm.$valid = {{editForm.$valiD}}</tt><br> <tt>editForm.basicForm.$valid = {{editForm.basicForm.$valiD}}</tt><br> <tt>editForm.extendedForm.$valid = {{editForm.extendedForm.$valiD}}</tt> </div> </div>
basic.html
<div ng-form="basicForm"> <div class="form-group"> <label for="textProperty">Text Property</label> <input type="text" class="form-control" name="textProperty" id="textProperty" ng-model="model.textProperty" required> </div> </div>
extended.html
<div ng-form="extendedForm"> <div class="form-group"> <label for="numericProperty">Numeric Property</label> <input type="number" class="form-control" name="numericProperty" id="numericProperty" ng-model="model.numericProperty" required> </div> <div class="form-group"> <label for="dateProperty">Date Property</label> <input type="date" class="form-control" name="dateProperty" id="dateProperty" ng-model="model.dateProperty" required> </div> </div>
我开始相信这种做法不适合我的目的.而不是使用嵌套视图,我应该继续使用该选项卡并使用一个状态参数来激活相应的选项卡.
更新1:
更新2:
更新3:
以上是大佬教程为你收集整理的使用ui-router模块进行AngularJS多步骤验证全部内容,希望文章能够帮你解决使用ui-router模块进行AngularJS多步骤验证所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。