1. 引入angular-messages.js插件
2. 在模块中引入ngMessages
| Var homePageApp = angular.module('homePageApp',['ui.router','pager','ngDialog','daterangepicker','ngMessages']); |
3. 在模板文件中使用它进行验证
| <div class="form-inline form-group" ng-class="{'has-error':keywordForm.host.$touched && keywordForm.host.$invalid}"> <label><font style="color: red">*</font> 域名:</label> <input "form-control" type="text" id="host" name="host" ng-model="host" ng-maxlength="255" ng-pattern="/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/" /> <div class="help-block" ng-messages="keywordForm.host.$error" ng-if="keywordForm.host.$touched"> <p ng-message="maxlength">域名最大长度255</p> <p ng-message="required">域名必填</p> <p ng-message="pattern">域名输入不正确</p> </div> </div> |
1. 引入ngDialog.js插件以及相关的样式；
2. 在模块中引入ngDialog
| 'pager','ngDialog',255)">'daterangepicker',255)">'ngMessages']); |
3. 在Controller相关方法中操作ngDialog
| homePageApp.controller('KeywordsController',255)">'$scope',255)">'keywordsService',255)">'ngDialog',function($scope,keywordsService,ngDialog){ $scope.clickToDelete = function(host,chooseType){ var del_flag = false; ngDialog.open({ template: '../../templates/keywords_deleteOne_popup.html', className:'ngdialog-theme-default', width:350, height:200, preCloseCallback:function(){ $scope.getKeywordListByCondition(); }, controller:function($scope){ $scope.deleteOne = function(delflag){ del_flag = delflag; if(del_flag){ if(chooseType == '1'){ keywordsService.deleteUrlKeyword({ params : { "host":host }, callback : function(result) { } }); }else{ keywordsService.deleteUrlKeywordNoPrefix({ params : { function(result) { } }); } } $scope.closeThisDialog(); //关闭对话框 } } }); } }]); |
Angulajs使用$scope中的变量赋值赋值问题
| //var chooseArr = $scope.chooseArr; //这种方式会改变$scope.chooseArr的值（angularjs数据双向绑定机制） //var removeArr = $scope.removeArr; var chooseArr = angular.copy($scope.chooseArr); //正确的操作方式，只是对值进行拷贝 var removeArr = angular.copy($scope.removeArr); for(var i = 0; i <chooseArr.length ; i++){ var j = 0; j < removeArr.length ; j++){ if(chooseArr[i].host == removeArr[j].host){ chooseArr.splice(i,1); removeArr.splice(j,1); i--; break; } } } |
Angulajs动态修改模板中样式（即class）
1.在模板class中设置变量
| <"form-inline form-group"> <button "btn {{kBtn}}" ng-click="changeContent(false)">关键字型</button> <"btn {{nPBtn}}"changeContent(true)">截取型</button> </div> |
2.controller中的代码
| $scope.flag = false; $scope.chooseType = "1"; $scope.changeContent = function(flag){ $scope.flag = flag; if($scope.flag){ $scope.chooseType = "2"; //动态设置按钮样式。。。。 $scope.kBtn = "search-btn1"; $scope.nPBtn = "search-btn"; }else{ $scope.chooseType = "1"; "search-btn"; $scope.nPBtn = "search-btn1"; } } |
Angulajs路由插件ui-router使用
1. 引入angularjs-ui-router.js文件
| <script type="text/javascript" src="${ctx}/plugins/angular/angular-ui-router.js"></script> |
2. 模块中引入ui.router
| var homePageApp = angular.module('homePageApp',['ui.router','pager','ngDialog','daterangepicker','ngMessages']); |
3. 在homePageApp中配置路由
| homePageApp.config(function($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise('/index/keywords'); //默认执行的URL $stateProvider .state('index',{ //主页用于显示左侧的导航栏，加载/index/keywords之前会先展示它 url: '/index', views: { '': { templateUrl:'../../templates/index.html' } } }) .state('index.keywords',{ url: '/keywords', templateUrl: '../../templates/keywords.html' }) .state('index.entrance',255)">'/entrance',255)">'../../templates/entrance.html' })； }); Angularjs中factory使用
|
