Share.. Ask.. Learn..
Pages
Home
AngularJs Keywords
AngularJS
AngularJS Question & Answer
Angular 2
About Us
Contact Us
Tuesday, 19 January 2016
How to bind a checkbox in angularjs with example
Syntax:
<
input
type
="checkbox"
ng-model
="expression"
/>
Checkbox in angularjs with example:
<
div
ng-controller
="angularjsexampleCtlr"
class
="row">
<
div
class
="col-lg-12">
<
div
class
="col-lg-6">
Get and Set Value form/in input
</
div
>
</
div
>
<
div
class
="col-lg-12">
<
div
class
="col-lg-6">
<
input
type
="checkbox"
class
="form-control"
ng-model
="value"
/>
</
div
>
<
div
class
="col-lg-6">
<
button
ng-click
="myfun()">
Show Value
</
button
>
<
button
ng-click
="value=''">
Reset
</
button
>
</
div
>
</
div
>
</
div
>
o/p: selectedValue=
{{
value
}}
<
script
>
angular.module(
'webapp'
, []).controller(
'angularjsexampleCtlr'
,
function
($scope, $http) {
$scope.myfun =
function
() {
alert(
"Value : "
+ $scope.value);
}
});
</
script
>
Get and Set Value form/in input
Show Value
Reset
Saturday, 16 January 2016
How to bind a ng-model with input type, Get and Set value from/to input type
Use of ng-model:
ng-model is used with input to get and set value.
<
div
ng-controller
="angularjsexampleCtlr"
class
="col-lg-12">
<
div
class
="col-lg-6">
Get and Set Value form/in input
</
div
>
<
div
class
="col-lg-6">
<
input
type
="text"
ng-model
="value"><
input
>
<
button
ng-click
="myfun()">
Show Value
</
button
>
</
div
>
</
div
>
o/p: selectedValue=
{{
value
}}
<
script
>
angular.module(
'webapp'
, []).controller(
'angularjsexampleCtlr'
,
function
($scope, $http) {
$scope.myfun=
function
()
{
alert(
"Value : "
+$scope.value);
}
});
</
script
>
Get and Set Value form/in input
Show Value
Reset
o/p: value =
{{value}}
Sunday, 10 January 2016
AngularJs directive for only integer input in a textbox /input type text
Description:
AngularJs directive for only integer input can use to restrict the value other than Integer.So only integer value is allowed where this directive is given.This AngularJs directive use as class/attribute, follow angularjs example given below.
AngularJs directive for Integer Number:
angular.module('
webapp
',[]).directive(
'OnlyIntegerValue'
,
function
() {
return
{
restrict:
'CA'
,
require:
'?ngModel'
,
link:
function
(scope, element, attrs, ngModelCtrl) {
if
(!ngModelCtrl) {
return
;
}
ngModelCtrl.$parsers.push(
function
(value) {
var
vaildValue = val.replace(
/[^0-9]+/g
,
''
);
if
(value !== clean) {
ngModelCtrl.$setViewValue(vaildValue);
ngModelCtrl.$render();
}
return
vaildValue;
});
element.bind(
'keypress'
,
function
(event) {
if
(event.keyCode === 32) {
event.preventDefault();
}
});
}
};
How to Use Only Integer Directive:
Example 1:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr"
>
<
div
>
Angularjs Example of Integer Only Directive as attribute
<
label
>No of Months in a Year</
label>
<
input
type
="text"
only-integer-value
/>
</
div
>
</
div
>
</
div
>
Example 2:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr">
<
div
>
Angularjs Example of Integer Only Directive as class
<
label
>No of Months in a Year</
label>
<
input
type
="text"
class
="only-integer-value"
/>
</
div
>
</
div
>
</
div
>
Sunday, 22 November 2015
ng-checked
What is ng-checked:
ng-checked is used to checked/unchecked status off radio/checkbox ..
Description of ng-checked:
ng-checked has priority 100. When ng-checked has a true condition it makes status checked in other hand when given condition is false status of input (type: radio, checkbox ) become unchecked..
Syntax of ng-checked:
<
element
ng-checked
="expression">
</
element
>
or
<
input
type
="checkbox"
ng-checked
="expression"
/>
How to Use ng-checked/ng-checked Example::
Example 1:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr"
ng-init
="flag=true">
<
div
>
Angularjs Example of ng-checked
<
input
type
="checkbox"
ng-checked
="flag"
/>
</
div
>
</
div
>
</
div
>
Example 2:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr">
<
div
>
Angularjs Example of ng-checked
<
input
type
="checkbox"
ng-checked
="flag"
/>
<
input
type
="button"
ng-click
="myfun()"
/>
</
div
>
</
div
>
</
div
>
<
script
>
angular.module(
'webapp'
, []).controller(
'angularjsexampleCtlr'
,
function
($scope, $http) {
$scope.myfun =
function
() {
if
($scope.flag ==
false
|| $scope.flag == undefined)
$scope.flag =
true
;
else
$scope.flag =
false
;
}
});
</
script
>
ng-disabled
What is ng-disabled:
ng-disabled is used to make element (input ,select ,textarea,button etc) disabled..
Description of ng-disabled:
ng-disabled has priority 100. When given condition in ng-disabled is true ,targeted element become disabled .Otherwise when condition is false targeted element has no effect..
Syntax of ng-disabled:
<
element
ng-disabled
="expression">
</
element
>
or
<
input
ng-disabled
="expression"
/>
How to Use ng-disabled/ng-disabled Example::
Example 1:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr"
ng-init
="flag=true">
<
div
>
Angularjs Example of ng-disabled
<
input
type
="text"
ng-disabled
="flag"
/>
</
div
>
</
div
>
</
div
>
Example 2:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr">
<
div
>
Angularjs Example of ng-disabled
<
input
type
="text"
ng-disabled
="flag"
/>
<
input
type
="button"
ng-click
="myfun()"
/>
</
div
>
</
div
>
</
div
>
<
script
>
angular.module(
'webapp'
, []).controller(
'angularjsexampleCtlr'
,
function
($scope, $http) {
$scope.myfun =
function
() {
if
($scope.flag ==
false
|| $scope.flag == undefined)
$scope.flag =
true
;
else
$scope.flag =
false
;
}
});
</
script
>
ng-readonly
What is ng-readonly:
ng-readonly is used to make element (input ,select ,textarea) read only...
Description of ng-readonly:
ng-readonly has priority 100. When given condition in ng-readonly is true ,targeted element become read only.Otherwise when condition is false targeted element has no effect...
Syntax of ng-readonly:
<
element
ng-readonly
="expression">
</
element
>
or
<
input
ng-readonly
="expression"
/>
How to Use ng-readonly/ng-readonly Example::
Example 1:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr"
ng-init
="flag=true">
<
div
>
Angularjs Example of ng-readonly
<
input
type
="text"
ng-readonly
="flag"
/>
</
div
>
</
div
>
</
div
>
Example 2:
<
div
ng-app
="webapp">
<
div
ng-controller
="angularjsexampleCtlr">
<
div
>
Angularjs Example of ng-readonly
<
input
type
="text"
ng-readonly
="flag"
/>
<
input
type
="button"
ng-click
="myfun()"
/>
</
div
>
</
div
>
</
div
>
<
script
>
angular.module(
'webapp'
, []).controller(
'angularjsexampleCtlr'
,
function
($scope, $http) {
$scope.myfun =
function
() {
if
($scope.flag ==
false
|| $scope.flag == undefined)
$scope.flag =
true
;
else
$scope.flag =
false
;
}
});
</
script
>
Older Posts
Home
Subscribe to:
Posts ( Atom )