Вы находитесь на странице: 1из 5

AngularJS is constantly updating the state of both the form and the input fields.

Input fields have the following states:

$untouched - The field has not been touched yet


$touched - The field has been touched
$pristine - The field has not been modified yet
$dirty - The field has been modified
$invalid - The field content is not valid
$valid - The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine - No fields have been modified yet


$dirty - One or more have been modified
$invalid - The form content is not valid
$valid - The form content is valid
$submitted - The form is submitted

They are all properties of the form, and are either true or false.

<form ng-app="myApp" ng-controller="validateCtrl"


name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>

------------------------------------------------
<input type="number"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[ng-min="string"]
[ng-max="string"]
[step="string"]
[ng-step="string"]
[required="string"]
[ng-required="string"]
[ng-minlength="number"]
[ng-maxlength="number"]
[pattern="string"]
[ng-pattern="string"]
[ng-change="string"]>

--------------------------------------------------
deleteUser = $window.confirm('Are you sure you want to delete the record?');
if(deleteUser){

$http.post("http://localhost:8080/mssqlwater/includes/api/connection_delete.php",
{id: id})
.then(function(){
$scope.message = "Successfully Deleted";
$scope.messageStatus = "alert alert-danger";
$scope.msgBox = true;
$timeout(function(){
$scope.msgBox = false;
}, 1000);
$scope.selectData();
});

-----------------------------------------------------------------------------------
----------
var app = angular.module("mySettings", ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider.
when("/cubic", {
templateUrl: "pages/cubic.htm",
controller: "myCubicSettingsController"
}).
when("/typecon", {
templateUrl: "pages/typecon.htm",
controller: "myConnectionSettingsController"
}).
when("/download", {
templateUrl: "pages/download.htm",
controller: "myDownloadSettingsController"
}).
when("/upload", {
templateUrl: "pages/upload.htm",
controller: "myUploadSettingsController"
});

console.log('here');
});

app.controller("myConnectionSettingsController", function($scope, $http,


$timeout, $window){
var tmpid=0;
var tmpobj=null;

$http.get('http://localhost:8080/mssqlwater/includes/api/connection_list_row.php').
then(function(response){
$scope.connections = response.data;
});

//selectData();

$scope.insertData = function(){
ans = $window.confirm('Are you sure you want to add this
record?');

if (ans){

$http.post("http://localhost:8080/mssqlwater/includes/api/connection_add.php",
{type: $scope.type, minrate: $scope.minrate, mincubic: $scope.mincubic, percubic:
$scope.percubic, tax: $scope.tax, status: $scope.status})
.then(function(){
$scope.message = "Successfully Submited!";
$scope.msgBox = true;
$scope.type = "";
$scope.minrate = "";
$scope.mincubic = "";
$scope.percubic = "";
$scope.tax = "0.0";
$scope.status = "Active";
$timeout(function(){
$scope.msgBox = false;
}, 1000);
$scope.selectData();
});
}
}

$scope.selectData = function(){

$http.get('http://localhost:8080/mssqlwater/includes/api/connection_list_row.php').
then(function(response){
$scope.connections = response.data;
});
//alert('hello');
}

$scope.btnInsert = true;

$scope.updateData = function(mem_id){
$scope.btnUpdate = false;
$scope.btnInsert = true;

$http.post("http://localhost:8080/mssqlwater/includes/api/connection_edit.php",
{id: $scope.id, type: $scope.type, minrate: $scope.minrate, mincubic:
$scope.mincubic, percubic: $scope.percubic, tax: $scope.tax, status:
$scope.status})
.then(function(response){
$scope.type = "";
$scope.minrate = "";
$scope.mincubic = "";
$scope.percubic = "";
$scope.tax = "0.0";
$scope.status = "Active";
$scope.id = "";
$scope.message = "Successfully Updated";
$scope.messageStatus = "alert alert-success";
$scope.msgBox = true;
$timeout(function(){
$scope.msgBox = false;
}, 1000);
$scope.selectData();
});
}

$scope.updateBtn = function(objcon){
$scope.btnInsert = false;
$scope.btnUpdate = true;

$scope.id = objcon.id;
$scope.type = objcon.type;
$scope.minrate = parseInt(objcon.minrate);
$scope.mincubic = parseInt(objcon.mincubic);
$scope.percubic = parseInt(objcon.percubic);
$scope.tax = parseInt(objcon.tax);
$scope.status = objcon.status;

$scope.deleteData = function(id){
deleteUser = $window.confirm('Are you sure you want to delete the
record?');
if(deleteUser){

$http.post("http://localhost:8080/mssqlwater/includes/api/connection_delete.php",
{id: id})
.then(function(){
$scope.message = "Successfully Deleted";
$scope.messageStatus = "alert alert-danger";
$scope.msgBox = true;
$timeout(function(){
$scope.msgBox = false;
}, 1000);
$scope.selectData();
});

}
}
});

app.controller("myDownloadConnSettingsController", function($scope, $http){

});