AngularJS Clean

AngularJS project

by Felipe Alfaro

HTML

<p>{{ teen }}</p>
<input type="text" ng-model="teen" custom-validation="cm($model)">

<input type="date" ng-model="initialDate">
<input type="date" ng-model="finalDate">



===

CSS

* { font-family: open sans; box-sizing: border-box; }
h1, h2, h3, h4, h5 { font-weight: 400; }
h1 { text-align: center; }
h1, h2, h3, h4, h5, p { color: rgb(73, 73, 73); }

JavaScript

var app = angular.module('app', []);

app.controller('mainController', function($scope, $element){
	$scope.cars = ['Mitsubishi', 'BMW', 'Porsche', 'McLaren', 'Renault'];
    $scope.rent = function(car){
    	console.info('Rent ' + car)
    };
    $scope.teen = '';
    $scope.$watch('teen', function(nv){
    	console.log('teen', nv);
        
    });
    $scope.cm = function(model){
        return model.toLowerCase().replace(/ /g, '');       
    };
    $scope.initialDate = new Date(2017, 6, 21);
    $scope.finalDate = new Date(2017, 6, 28);
    
    var prevInitial = $scope.initialDate,
    	prevFinal = $scope.finalDate;
    $scope.$watchGroup(['initialDate', 'finalDate'], function(newValues){
    	if(prevInitial !== newValues[0]){
        	prevInitial =  newValues[0];
        	console.log('initial changed');
        }
    	if(prevFinal !== newValues[1]){
        	prevFinal = newValues[1];
        	console.log('final changed');
        }
    });
    
    
    
    
});

app.directive('customValidation', function($parse){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
     
         modelCtrl.$parsers.push(function(inputValue){

           var transformedInput = $parse(attrs.customValidation)(scope, {
               $model: inputValue
           });

           if(transformedInput!=inputValue) {
               modelCtrl.$setViewValue(transformedInput);
               modelCtrl.$render();
           }

           return transformedInput;         
       });
     }
   };
});