LearnKode

9 Example(s) of Ng-Model-Options


Description :

Ng-Model is used as bridge between model and view and it also provide validation behavior. All the other directive are dependent on <code>ng-model</code> as this will remember the state of controls. It also provide setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations. See the code:


Ng-Model-Options Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            <label>
                Name:
                <input type="text" class="form-control" name="userName" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" />
            </label><br />
            <label>
                Other data:
                <input type="text" class="form-control" ng-model="user.data" />
            </label><br />
            <pre>user.name = <span ng-bind="user.name"></span></pre>
        </div>
    </div>
    <script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

The following example override immediate updates and Changes on the inputs within the form will update the model only when the control loses focus (blur event). See the code


Ng-Model-Options Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            <label>
                Name:
                <input type="text" class="form-control" name="userName" ng-model="user.name" ng-model-options="{ debounce: 1000 }" />
            </label>
            <button class="btn btn-default" ng-click="user.name=''">Clear</button>
            <br />
            <pre>user.name = <span ng-bind="user.name"></span></pre>
        </div>
    </div>
    <script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            <label>
                Name:
                <input type="text" class="form-control" name="userName" ng-model="userName" ng-model-options="{ getterSetter: true }" />
            </label>
            <pre>user.name = <span ng-bind="name()">{{modelOption}}</span></pre>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.userName="LearnKode";
        $scope.name = function () {
            $scope.modelOption = $scope.userName;
            }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            <label>
                User Name:
                <input type="text" class="form-control" name="userName" ng-model="userName" ng-model-options="{ updateOn: 'blur' }" />
            </label>
            <label>
                Password:
                <input type="password" class="form-control" name="pass" ng-model="password" ng-model-options="{ updateOn: 'blur' }" />
            </label>
            <button class="btn btn-default">Ok</button>
            <pre>User Name= {{userName}}<br />Password= {{password}}
           </pre>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            Update On Blur: <input type="text" class="form-control" ng-model="UpdateOnBlur" ng-model-options="{updateOn: 'blur'}" />
            <b>{{UpdateOnBlur}}</b>
            <br />
            Update On Change: <input type="text" class="form-control" ng-model="UpdateOnChange" />
            <b>{{UpdateOnChange}}</b>
            <br />
            Update On Debounce: <textarea class="form-control" ng-model="UpdateOnDebounce" ng-model-options="{debounce: 1000 }"></textarea>
            <b>{{UpdateOnDebounce}}</b>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            Update On Debounce: <select class="form-control" ng-model="UpdateOnBlur" ng-options="p.first as  p.first for  p in people" ng-model-options="{debounce: 1000}" ></select>
            <pre>Update on Debounce: <b>{{UpdateOnBlur}}</b></pre>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.people = [{  first: 'John', last: 'Rambo', actor: 'Silvester' },{  first: 'Rocky', last: 'Balboa', actor: 'Silvester' },{  first: 'John', last: 'Kimble', actor: 'Arnold' },{  first: 'Ben', last: 'Richards', actor: 'Arnold' }
        ];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-app="myApp">
    <div ng-controller="myController">
        <div class="container">
            <form name="userForm">
                <label>
                    Name:
                    <input type="text" class="form-control " name="userName" ng-model="name" ng-model-options="{ updateOn: 'blur' }" ng-keyup="cancel($event)" />
                </label>
            </form>
            <pre>{{name}}</pre>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', function ($scope, $timeout) {
        $scope.name = 'LearnIt';
        $scope.cancel = function (e) {
            if (e.keyCode == 27) {
                $scope.userForm.userName.$rollbackViewValue();
            }
        };
    });
</script>
</body>

</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-app="myApp">
    <div ng-controller="myController"><br />
        <div class="container">
            <label>
                Detail: <textarea class="form-control" ng-model="my.model" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 1000, 'blur':3000} }"></textarea>
            </label>
            <pre>Update on debounce and blur :{{my.model}}</pre>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', function ($scope, $timeout) {

    });
</script>
</body>

</html>
Try it » Download Example »

Output

Description :

Example of Ng-Model-Options


Ng-Model-Options Example - 9 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-app="myApp">
    <div ng-controller="myController">
        <br />
        <div class="container">
            <label>
                GILT: <input class="form-control" type="time" ng-model="GILTTime" ng-model-options="GILT" />
                UTC: <input class="form-control" type="time" ng-model="UTCTime" ng-model-options="UTC" />
            </label>
            <pre>GILT Time Zone: {{GILTTime}}</pre>
            <pre>UTC Time Zone: {{UTCTime}}</pre>
        </div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller('myController', function ($scope, $timeout) {
        $scope.GILT = {
            timezone: 'GILT'
        };
        $scope.UTC = {
            timezone: 'UTC'
        };

        $scope.UTCTime = new Date();
    });
</script>
</body>

</html>
Try it » Download Example »

Output