CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Ronny vdb
Ronny vdb

Reputation: 2464

Use a directive to display scope value and update scope

I have an array of vertex values that I loop over and display to the user. The values are stored as a space delimited string, like this:

vrtx = ["10.3 20.3 10.5", "13.2 29.2 3.0", "16.3 2.3 20.2", ...]

I want to provide a friendly interface to the user to edit the values. This requires me to split the strings into three separate numbers and put them into three individual inputs.

I want to create a directive, as I am not able to store the values as separate values, but after the editing is done, I want to join the values back and update the scope to store the new values as strings.

This is the directive I have so far:

 myApp.directive('fieldValue', function () {

    return {
        scope: {
          field:'='
        },
        link: function (scope, element, attrs) {
            var fields  = scope.field.split(' ');
            element.html("<input type='number' value='"+ fields[0] +"' class='vertex-input'/><input type='number' value='"+ fields[1] +"' class='vertex-input'/><input type='number' value='"+ fields[2] +"' class='vertex-input'/>");    
        }
    }

});

This splits the value and shows the three inputs with the individual values, but my question is how do I join these values and save them back to the scope? Any suggestions would be greatly appreciated! TIA

Upvotes: 0

Views: 106

Answers (2)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

You could use formatters/parsers to achieve what you want, but you may have to adjust your input to use ngModel, and I'm not quite sure how it would work with 3 separate input fields:

myApp.directive('fieldValue', function () {

    return {
        scope: {
          field:'='
        },
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var fields  = scope.field.split(' ');
            element.html("<input type='number' value='"+ fields[0] +"' class='vertex-input'/><input type='number' value='"+ fields[1] +"' class='vertex-input'/><input type='number' value='"+ fields[2] +"' class='vertex-input'/>");

            ngModel.$formatters.push(function(value){
              //return the value as you want it displayed
            });

            ngModel.$parsers.push(function(value){
              //return the value as you want it stored
            });


        }
    }

});

This way gives you a lot more flexibility in my opinion to use any strategy you want. Read more about it here: https://alexperry.io/angularjs/2014/12/10/parsers-and-formatters-angular.html

And, more official docs here: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Upvotes: 1

Mistalis
Mistalis

Reputation: 18269

I think that your question is the continuation of this one, so I would like to suggest you a solution without a directive, based on the answer of your precedent question.

When the value of an input is modified, call a function that merged all your inputs:

<input type="text" ng-model="arr[0]" ng-change="update()" />
<input type="text" ng-model="arr[1]" ng-change="update()" />
<input type="text" ng-model="arr[2]" ng-change="update()" />

$scope.update = function() {
    $scope.myString = $scope.arr[0] + ' ' + $scope.arr[1] + ' ' + $scope.arr[2];
}


var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.myString = 'My awesome text';
  $scope.arr = $scope.myString.split(/[ ]+/);

  $scope.update = function() {
    $scope.myString = $scope.arr[0] + ' ' + $scope.arr[1] + ' ' + $scope.arr[2];
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="text" ng-model="arr[0]" ng-change="update()" />
    <input type="text" ng-model="arr[1]" ng-change="update()" />
    <input type="text" ng-model="arr[2]" ng-change="update()" />
    <br/>Result: {{myString}}
  </div>
</div>

Try it on JSFiddle.

Upvotes: 1

Related Questions