ImputLimiter

by Aakash Khapare M

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        <input type="text" ng-model="newFruit">
        <button ng-click="addFruit()">Add</button>
    </div>
    <input type="text" ng-allowed-vals="fruits" ng-model="fruit">
</div>

JavaScript

angular.module("myApp", []);
angular.module("myApp")
    .controller("myCtrl", ["$scope", function($scope){
	    $scope.fruits = ["a"];
        $scope.fruit = "";
        $scope.addFruit = function(){
        	$scope.fruits.push($scope.newFruit);
            $scope.newFruit = "";
        }
	}]);
angular.module("myApp")
    .directive("ngAllowedVals", [function () {
        return {
            restrict: "A",
            require: "ngModel",
            scope: {
                ngAllowedVals: "="
            },
            link: function (scope, ele, attr, ngModelCtrl) {
               
                scope.$watch("ngAllowedVals", function(old, val){
                	ngModelCtrl.$setViewValue(formatArr(scope.ngAllowedVals));
                	ngModelCtrl.$render();
                }, true);
                
                function formatArr(allowedVals){
                    if(!allowedVals.length) return "";
                    var result = "";
                	for(var i = 0; i < allowedVals.length; i++){
        	        	if(i < allowedVals.length - 1)
    	                    result += "'" + allowedVals[i] + "',";
	                    else
                    	    result += "'" + allowedVals[i] + "'";
                    
                	}
                    return "[" + result + "]";
                }
            }
        }
	}]);