Angular + Easyui to do interface verification

Angular combination of Easyui this is not very appropriate, because: one of the characteristics of angular is two-way binding, page elements and page logic decoupling; Easyui is the encapsulation of page elements, and even some components are hidden from the original DOM elements, Creates a new element to implement functionality when initialized. In a way, angular and easyui are conflicting in principle, of course, the following is but, otherwise it is not very good to write down.

However, the validation controls validatebox the Easyui validation controls are obvious, UI effects are friendly and do not affect the normal work of angular, so I like to use these two combinations to verify.

Okay, let's get started. Add the reference first:

<script src= "/js/jquery-1.7.2.js" type= "Text/javascript" ></script>
<script src= "/js/jquery.easyui.min.js" type= "Text/javascript" ></script>
<script src= "/js/angular/angular.js" type= "Text/javascript" ></script>

Then the page element, you only need to assign attributes to the corresponding DOM element and set the validation rules:

Controller of course it's necessary.
<table rules= "None" ng-controller= "Invoicecontroller" class= "Styleentirewidth" >

<select class= "Easyui-validatebox stylewiden ng-model=" basic.applystate "ng-options=" C.value as C.text for C in Dict.applystatedata "
Id= "Applystate" name= "Applystate" data-options= "required:true,missingmessage: ' Please select Application status. '" >
<option value= "" >--Please choose--</option>
</select>

At this point, you can see the display effect

Image:

Back to the column page: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

To make the interface friendlier and easier to use, I used the Easyui form component

<div class= "Easyui-panel" title= "Invoice issuing application" style= "padding:0px;"
data-options= "Iconcls: ' Icon-save ', collapsible:true" id= "Ng-app" ng-app= "Invoice" >

The JS script is as follows:

JQuery (function () {
JQuery (' #ng-app '). Form (' Validate ');
var width = window.screen.availWidth * 0.9;
var height = document.body.offsetHeight * 0.932;
JQuery (' #ng-app '). Panel (' resize ', {
Width:width,
Height:height
});
});

The effect of this is as follows:

Finally, when you need to validate a page's required entry or format for a save-like operation, you only have to execute the following script:

$scope. Savepagedata = function (ControlID) {
var isValid = JQuery (' #ng-app '). Form (' Validate ');
if (isValid) {
......
}
};

IsValid in the script returns the result of the validation: TRUE or FALSE, the validation does not pass and no additional hints are required because the prompt on the interface is clear enough.

As for the other problem with this script: Angular's controller is best not to manipulate the DOM elements directly, I think there is enough reason to compromise here, and only this code, there will not be too many bad effects, As for the angular for the DOM element operation instructions directive, I did not think here how to use more convenient, everybody has the good idea, also please enlighten.

Author: cnblogs Draculav