set default value of input field based on another field in Angular

Question

In Angular (1.5) I have a form with two input fields:

ID
URL

The rules:

If the ID field is empty then the URL field should be empty
If the URL field is manually set then it should not change automatically
Otherwise the URL field should be "http://myurl/"+ID+".txt"

How do I achieve this?

George Chen · Accepted Answer · 2016-03-20 19:38:10Z

1

  <input type="text" name="url"
         ng-model="url"
         ng-model-options="{ getterSetter: true }" />

...

    function defaulUrl() {
       if $scope.ID {
          return 'http://myurl/'+$scope.ID+'.txt';
       } 

       return ''
    }

    var _url = defaultURl();

    $scope.url = {
       url: function(url) {

            return arguments.length ? (_url= url) : defaulUrl();
       }
    }

};

edited Mar 20, 2016 at 19:38

answered Mar 20, 2016 at 19:32

George Chen

6,9895 gold badges23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

itsjeyd · Accepted Answer · 2016-06-09 08:56:56Z

0

Use $watch on ID Field. If the ID field is changed, the watch function will be called.

$scope.$watch('$scope.ID', function() {
    $scope.url = 'http://myurl/' + $scope.ID + '.txt';
}, true);

edited Jun 9, 2016 at 8:56

itsjeyd

5,3002 gold badges35 silver badges50 bronze badges

answered Mar 20, 2016 at 19:21

ziaulain

942 silver badges11 bronze badges

2 Comments

George Chen Over a year ago

i don't think this will work. "If the URL field is manually set then it should not change automatically". Changing ID will overwrite the manually inputted URL

Gabs00 Over a year ago

Agreed, how will this care for not changing the url if it is manually entered?

Gabs00 · Accepted Answer · 2016-03-20 19:38:09Z

Here is a fiddle I made that meets your requirments:fiddle

The code

//HTML

<div ng-app="myApp" ng-controller="MyController">
    ID <input type="text" ng-model="data.id" ng-change="onIDChange()"/>
    URL <input type="text" ng-model="data.url" ng-change="onManualUrlChange()"/>
</div>

//JS

angular.module('myApp',[])
.controller('MyController', ['$scope', function($scope){
  $scope.data = {
    id:'',
    url:''
  }
  $scope.manualUrl = false;

  $scope.onIDChange = function(){
    if(!$scope.manualUrl){
      if($scope.data.id === ''){
        $scope.data.url = '';
      } else {
        $scope.data.url = "http://myurl/" + $scope.data.id + ".txt";
      }
    }
  }

  $scope.onManualUrlChange = function(){
    $scope.manualUrl = true
  };
}]);

Collectives™ on Stack Overflow

set default value of input field based on another field in Angular

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related