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>

ng-selected

What is ng-selected:ng-selected is used to selected/unselected status of radio/checkbox or in select for option..
Description of ng-selected:ng-selected has priority 100. When ng-selected has a true condition it makes status selected in other hand when given condition is false status of input (radio, checkbox,select for option ) become unselected..
Syntax of ng-selected:
<element ng-selected="expression">

</element>
or

<select>
    <option value="1" ng-selected="expression">One</option>
    <option value="2">Two</option>

</select>
How to Use ng-selected/ng-selected Example::
Example 1:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr" ng-init="flag=true">
        <div>
            Angularjs Example of ng-selected
            <select>
                <option value="1" ng-selected="flag">One</option>
                <option value="2">Two</option>
            </select>

        </div>
    </div>
</div>

Example 2:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-selected
            <select>
                <option value="1" ng-selected="flag">One</option>
                <option value="2" >Two</option>
            </select>
            <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>