Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>ng-trim Check Sample</title>
</head>
​
<body ng-app="vfc" ng-controller="MainCtrl">
    <form name="myForm">
        <div class="form-group">
            <label for="id">ID:数値４文字(ng-trim="true"(default))</label>
            <input 
                name="id"
                ng-model="id" 
                type="text" 
                class="form-control" 
                id="id" 
                placeholder="ID"
                ng-maxlength="4"
                ng-minlength="4" 
                ng-pattern="/^[0-9]*$/"/>
        </div>
    </form>
    <pre>$scope.id:{{id}}</pre>
    <pre>$scope.myForm.id.$viewValue:{{myForm.id.$viewValue}}</pre>
    <pre>$scope.myForm.id.$error: {{myForm.id.$error|json}}</pre>
    <form name="myFormDisableNgTrim">
        <div class="form-group">
            <label for="id_2">ID:数値４文字(ng-trim="false")</label>
            <input 
                name="id_2"
                ng-model="id_2" 
                type="text" 
                class="form-control" 
                id="id_2" 
                placeholder="ID"
                ng-maxlength="4"
                ng-minlength="4" 
                ng-pattern="/^[0-9]*$/"
                ng-trim="false"/>
        </div>
    </form>
    <pre>$scope.id_2:{{id_2}}</pre>
    <pre>$scope.myFormDisableNgTrim.id_2.$viewValue:{{myFormDisableNgTrim.id_2.$viewValue}}</pre>
    <pre>$scope.myFormDisableNgTrim.id_2.$error:{{myFormDisableNgTrim.id_2.$error|json}}</pre>
</body>
​
</html>
​
 
(function(){
  'use strict';
  var app = angular.module('vfc',[]);
  app.controller('MainCtrl',function($scope){ });
}());
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
CM-Kajiwarapro
0viewers