JSAngular-08

ng-change

by munir

HTML

<html ng-app>
    <div class="browser" ng-controller="Browser">
        <div class="url">
            <label for="url"> &larr; &rarr; &infin; </label>
            <input value="edit/{{path}}">
        </div>
        <div class="page">
            <label>Update the url:</label>
            <input ng-change="clean()" ng-model="path">
        </div>
    </div>
    <script>
       var Browser = function($scope){
           $scope.clean = function(){
        //clean spaces and pancuations 
               $scope.path = $scope.path
                                    .replace(/\s+/g, '-')
                                    .replace(/[^a-z0-9-]/ig, '');
           };
       }; 
    </script>
</html>

CSS

* { box-sizing: border-box; }
    body{ font: 16px/1.5 sans-serif; color: #222; margin: 3em;}
.browser {box-shadow: 0 2.5em 2.5em rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.2):}
.url {background: #eee; padding: 0.444em 0.5em;}
.url input {width: 85%;}
.url label { display: inline-block; width: 14%; fron-size: 0.667em;}
.page { border: 1px solid #eee; padding: 2.5em; min-height: 15em;}
.page input {width: 100%;}