How to tie ng-model variable to the value of an input box in angular?

Question

Without any angular, I have an input like this (which is the end result of what I want):

<input type="text" value="['Apple','Pear']">

What I want is the content in "value" to come from a scope variable.

$scope.mylist = ['Apple','Pear'] # Assume this is my controller

<input type="text" ng-model="mylist" value="">

Which should translate to what I have at the top. Is this the right way to do this? How can I accomplish the same effect as my first snippet? If it is easier to just construct a string as a scope variable, that is also an acceptable answer. I am looking for simple.

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

A simple and not so good solution would be creating a second variable (that represents the JSONification of the original), bind it to the input and watch for changes and parse back to the original.

A better solution is to follow this answer and create a directive for parsing and formating the input value.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 24 '15 at 04:00

gfpacheco

2,831
2
33
50

Is watching the most efficient? If possible, I would like to avoid "watch" if possible. Though if it involves "clicking a button" then setting a scope variable to something, I like that better. – Setsuna Sep 24 '15 at 04:07

score 0 · Answer 2 · answered Sep 24 '15 at 08:29

I know you have commented saying you want to avoid "watch". Please tell why?. I have seen usage of watch in the directives hence my solution is as below.

<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>

angular.module("myApp", []);
angular.module("myApp")
    .controller("myCtrl", ["$scope", function($scope){
        $scope.fruits = ["apple"];
        $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 + "]";
                }
            }
        }
    }]);

JSFiddle

How to tie ng-model variable to the value of an input box in angular?

2 Answers2

Linked