Select shows value in input AngularJS

Question

I need to do something like this : When you select ex. "login", then in input text shows login from $scope.logins The same with password

JS:

  $scope.logins = [{
        "login" : "log",
        "password" : "pass"
    }]

HTML:

<select ng-model="type">
     <option value="" disabled selected>Type</option>
     <option>login</option>
     <option>password</option>
</select>

<input class="form-control" name="type" placeholder="value" ng-model="value" style="margin-bottom:5px;">

Thanks for answers in advance.

Why did you remove my answer?

Vivz
– Vivz

2017-08-02 12:41:18 +00:00
Commented Aug 2, 2017 at 12:41 — Vivz
– Vivz, Commented Aug 2, 2017 at 12:41

Vivz · Accepted Answer · 2017-08-02 11:30:47Z

First Method

You can use $scope.$watch to accomplish this

var app = angular.module('mainApp', []);
app.controller('mainController', function($scope) {
    $scope.logins = [{
        "login" : "log",
        "password" : "pass"
    }]
    $scope.$watch('type',function(val){
       $scope.value=$scope.logins[0][val];
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainController" class="col-xs-12">
<select ng-model="type">
     <option value="" disabled selected>Type</option>
     <option>login</option>
     <option>password</option>
</select>

<input class="form-control" name="type" placeholder="value" ng-model="value" style="margin-bottom:5px;"> 
</div>

Second Method

You can directly bind the logins object with respect to type in your input. (No calculations needed in js)

var app = angular.module('mainApp', []);
app.controller('mainController', function($scope) {
    $scope.logins = [{
        "login" : "log",
        "password" : "pass"
    }]

 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainController" class="col-xs-12">
<select ng-model="type">
     <option value="" disabled selected>Type</option>
     <option>login</option>
     <option>password</option>
</select>

<input class="form-control" name="type" placeholder="value" ng-model="logins[0][type]" style="margin-bottom:5px;"> 
</div>

Ajit Soman · Accepted Answer · 2017-08-02 12:50:48Z

1

Use ng-change for this:

<select ng-model="type" ng-change="onSelectBoxChange(type)">
     <option value="" disabled selected>Type</option>
     <option value="login">login</option>
     <option value="password">password</option>
</select>

<input class="form-control" name="type" placeholder="value" ng-model="value" style="margin-bottom:5px;">

In Controller

$scope.logins = [{
        "login" : "log",
        "password" : "pass"
    }];

$scope.onSelectBoxChange = function(selectedValue){
  if(selectedValue=="login"){
    $scope.value = $scope.logins[0].login;
  }else{
    $scope.value=undefined;
  }
}

edited Aug 2, 2017 at 12:50

answered Aug 2, 2017 at 11:15

Ajit Soman

4,0693 gold badges26 silver badges43 bronze badges

1 Comment

Vivz Over a year ago

I don't understand how this became the accepted answer, this won't even work for both cases?

Collectives™ on Stack Overflow

Select shows value in input AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related