Ajax commit, get background data

Tag:example    Fetch data    radio   pat   ber        cfa   and   label   , Hebei province;

<body>
<div class= "Row" ng-app= "myApp" ng-controller= "Myctrl" >
<ul class= "Content" >
<li class= "Form-group" >
<span class= "sign" >sign up</span>
</li>
<li class= "Form-group" >
<label for= "ExampleInputNumber2" ><span class= "error" ></span><span id= "Lefttext" >* Name: </ Span></label>
<input type= "text" class= "Form-control" id= "name" placeholder= "Kanji" ng-model= "form.name" maxlength= ">"
</li>
<li class= "Form-group" >
<label for= "ExampleInputNumber1" ><span class= "error" ></span><span id= "lefttext" >* user name:< /span></label>
<input type= "text" class= "Form-control" id= "UserName" placeholder= "three bit more characters" ng-model= "Form.username" maxlength= " ">
</li>

<li class= "Form-group" >
<label for= "ExampleInputNumber3" ><span class= "error" ></span><span id= "Lefttext" >* mobile phone number:< /span></label>
<input type= "text" class= "Form-control" id= "Phone" placeholder= "number" required ng-model= "Form.phone" maxlength= " ">
</li>
<li class= "Form-group" >
<label for= "ExampleInputNumber4" ><span class= "error" ></span><span id= "Lefttext" >* mailbox: </ Span></label>
<input type= "text" class= "Form-control" id= "email" placeholder= "@qq. com" Required ng-model= "Form.email" maxlength= ">"
</li>
<!--<li class= "Form-group" >
<label class= "Sex" ><span id= "lefttext" > Sex:</span></label>
<input class= "Sex" checked name= "Sex" type= "Radio" value= "female" ng-model= "Form.sex"/> Female
<input name= "Sex" type= "Radio" value= "Male" ng-model= "form.sex"/> Male
</li>-->
<li class= "Address" >
<label><span class= "error" ></span><span id= "lefttext" >* address:</span></label>
<select id= "selprovince" ng-change= "Selpro ()" ng-model= "form. Province "ng-options=" x.proid as X.proname for x in Province ">
<option value= "" > Please select Province </option>
</select>
<select id= "selcit" ng-model= "form. City "ng-options=" X.cityid as X.cityname for x in Selcity ">
<option value= "" > Please select City </option>
</select>
</li>
<li class= "Form-group" >
<label for= "ExampleInputPassword1" ><span class= "error" ></span><span id= "lefttext" >* Password: </span></label>
<button id= "btn" onclick= "password ()" title= "s" >s</button><input type= "password" class= "Form-control "Ng-model=" Form.password "id=" password "placeholder=" at least three digits "maxlength=" >
</li>
<li class= "Form-group" >
<label for= "Exampleinputfile" ><span class= "error" ></span><span id= "leftText" >* Confirm password: </ Span></label>
<button id= "btn1" onclick= "Password1 ()" title= "s" >s</button><input type= "password" class= " Form-control "id=" Abspassword "ng-model=" Form.passwordcha "placeholder=" Password "onkeyup=" Validate () "Maxlength=" ">
<p id= "Passerror" ></p>
</li>
<li class= "Form-group" >
<div style= "margin-left:10%;" >
<input type= "button" value= "Verify" onclick= "Confirm ()"/>
<input type= "text" id= "input" ng-model= "form.confirm"/>
<input type= "button" id= "code" onclick= "Createcode ()"/>

</div>
</li>
<li class= "checkbox Form-group" >
<label class= "box" >
<input type= "checkbox" > Remember Password
</label>
</li>
<li class= "Form-group butn" >
<input id= "Reset" type= "button" value= "reset" ng-click= "Reseat ()"/>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
<input type= "button" value= "Submit" ng-click= "click ()"/>
</li>
<li>
<table >
<tr>
<td> name </td>
<td> User name </td>
<td> Phone number </td>
<td> Email </td>
<td> Address-province </td>
<td> Address-City </td>
<td> functions </td>
</tr>
<tr ng-repeat= "T in UserList" ng-cloak>
&LT;TD >{{t.NAME}}</td>
<td>{{t.USERNAME}}</td>
<td>{{t.TELPHONE}}</td>
<td>{{t.EMAIL}}</td>
<td>{{t.proName}}</td>
<td>{{t.citName}}</td>
<td><a href= "javascript:void (0)" ng-click= "edit ($index)" > Modify </a>
<a href= "javascript:void (0)" ng-click= "Delete (t.oid)" > Delete </a></td>
</tr>

</table>
</li>
</ul>
</div>
</body>

<script src= "Js/jquery-2.2.3.min.js" ></script>
<script src= "Http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js" ></script>
<script src= "Js/javascript1.js" type= "Text/javascript" ></script>
<script>
Defining apps
var app = Angular.module (' myApp ', []);

Construction Factory class
App.factory (' publicfactory ', [' $http ', function ($http) {
var factory = {};
Get Data methods
Factory. GetList = function () {
Return $http. Get (Getapirootpath () + '/API/BASEUSERINFO/GETUSERINFOBYCREATER?CT=JSON&AMP;CREATER=HNN ', null);
}
Save method, Delete method similarly
Factory. Postuserinfosave = function (model) {
Return $http. Post (Getapirootpath () + '/api/baseuserinfo/postuserinfosave?ct=json ', {PostData:JSON.stringify (model) });
}
Delete
Factory. Postuserinfodelete = function (OID) {
Return $http. Post (Getapirootpath () + '/api/baseuserinfo/deleteuserinfosave?ct=json ', {postdata:oid});
}
return factory;
}]);

Defining the Controller
App.controller (' Myctrl ', [' $scope ', ' publicfactory ', function ($scope, publicfactory) {//Businessservice for factory class injection
$scope. userlist = [];
$scope. form = {};
$scope. user = {};
$scope. Province = [
{"Proid": 1, "Proname": "Hebei Province"},
{"Proid": 2, "Proname": "Hunan Province"},
{"Proid": 3, "Proname": "Henan Province"}];
$scope. City = [
{"Cityid": 1, "CityName": "Shijiazhuang", "Proid": 1},
{"Cityid": 2, "CityName": "Changsha", "Proid": 2},
{"Cityid": 3, "CityName": "Zhengzhou", "Proid": 3},
{"Cityid": 4, "CityName": "Nanyang", "Proid": 3},
{"Cityid": 5, "CityName": "Zhumadian", "Proid": 3}];
var handlelist = function (data) {
Console.log (data); Output content to the console
data = eval (data);
Remove double quotes, convert string to array
$scope. userlist = data;
Province

for (var i = 0; i < data.length; i++) {
for (var j = 0; J < $scope. Province.length; j + +) {
if (Data[i]. Province = = $scope. province[j].proid) {
Data[i].proname = $scope. Province[j].proname;
Break
}
}
for (var j = 0; J < $scope. City.length; j + +) {
if (Data[i]. City = = $scope. City[j].cityid) {
Data[i].citname = $scope. City[j].cityname;
Break
}
}
}

}
Publicfactory.getlist (). Success (Handlelist);
Linkage
$scope. Selpro = function () {

$scope. selcity = [];
for (var i = 0; i < $scope. city.length; i++) {
if ($scope. city[i].proid = = $scope. Form.province) {
$scope. Selcity.push ($scope. city[i]);
}
}
}
Method
$scope. Borde = function () {
$ (' #name '). CSS ({
' Border ': ' 1px solid #ccc ',
});
$ (' #userName '). CSS ({
' Border ': ' 1px solid #ccc ',
});
$ (' #absPassword '). CSS ({
' Border ': ' 1px solid #ccc ',
});
$ (' #phone '). CSS ({
' Border ': ' 1px solid #ccc ',
});
$ (' #email '). CSS ({
' Border ': ' 1px solid #ccc ',
});
$ (' #password '). CSS ({
' Border ': ' 1px solid #ccc ',
});
}
Submit
$scope. Click = function () {

if ($scope. form.name! = ' && $scope. Form.username! = ' && $scope. Form.phone! = ' && $scope. Form . email! = "&& $scope. Form.province! =" && $scope. Form.password! = "&& $scope. form.city! =" ) {
Publicfactory.getlist (). Success (Handlelist);
var json = {
OID: $scope. User.oid,
NAME: $scope. Form.name,
USERNAME: $scope. Form.username,
Telphone: $scope. Form.phone,
EMAIL: $scope. Form.email,
Province: $scope. Form.province,
City: $scope. form.city,
PASSWORD: $scope. Form.password,
Creater: ' HNN '
};
Publicfactory.postuserinfosave (JSON);
Publicfactory.postuserinfosave ($scope. form);
Publicfactory.getlist (). Success (Handlelist);
$scope. form = {};
$scope. Borde ();
}

}
Reset
$scope. reseat = function () {
$scope. form = {};
$scope. Borde ();

}
Modify
Publicfactory.getlist (). Success (Handlelist);
$scope. Edit = function (index) {
Debugger

UserList Array, User object
$scope. user = $scope. Userlist[index];

$scope. Form.name = $scope. User.Name;
$scope. Form.username = $scope. User.username;
$scope. Form.phone = $scope. User.telphone;
$scope. Form.email = $scope. User.email;
$scope. form.province = Number ($scope. user.province);
$scope. Form.city =number ($scope. user.city);
$scope. Form.password = $scope. User.password;

$scope. Selpro ();

}
Delete
$scope. Delete = function (OID) {
Publicfactory.getlist (). Success (Handlelist);
Publicfactory.postuserinfodelete (OID);
Publicfactory.getlist (). Success (Handlelist);
}
}]);

method to get the current host address
var getapirootpath = function () {
Get the current URL, such as: Http://localhost:8080/ems/Pages/Basic/Person.js
var curwwwpath = Window.document.location.href;
Gets the directory after the host address, such as:/ems/pages/basic/person.js
var pathName = Window.document.location.pathname;
var pos = curwwwpath.indexof (pathName);
Get host address, such as: http://localhost:8080
var localhostpath = curwwwpath.substring (0, POS);
return localhostpath;
};
</script>

Ajax commit, get background data