Dropdown menu shows value in input AngularJS

Question

I need to do something like this : When you click ex. "login" in <ul class="dropdown-menu">, then in input text shows login from $scope.logins The same with password

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

HTML :

  <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Type
              <span class="caret"></span></button>
                <ul class="dropdown-menu">
                 <li><button>login</button></li>
                 <li><a>password</a></li>
                </ul>
               </div>

<input class="form-control" name="type" placeholder="value" ng-model="value">

Plunker: http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

Thanks for help in advance!

What is the issue? What did you try so far?

Prerak Sola
– Prerak Sola

2017-08-11 08:04:59 +00:00
Commented Aug 11, 2017 at 8:04 — Prerak Sola
– Prerak Sola, Commented Aug 11, 2017 at 8:04
Possible duplicate of Select shows value in input AngularJS

Vivz
– Vivz

2017-08-11 08:18:22 +00:00
Commented Aug 11, 2017 at 8:18 — Vivz
– Vivz, Commented Aug 11, 2017 at 8:18

Hadi · Accepted Answer · 2017-08-11 08:13:45Z

1

Try add ng-click to li tag and init value model.

  <li ng-click="value = logins[0].login"><a >login</a></li>
  <li ng-click="value = logins[0].password"><a >password</a></li>

edited Aug 11, 2017 at 8:13

answered Aug 11, 2017 at 8:07

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

2 Comments

bafix2203 Over a year ago

I don't want to put 'login' to value, i want to put logins.login

Hadi Over a year ago

update to this <li ng-click="value = logins[0].login"><a >login</a></li>

Gaurav Srivastava · Accepted Answer · 2017-08-11 08:12:12Z

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="script.js"></script>

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Type
              <span class="caret"></span></button>
      <ul ng-init="placeholder = ''" class="dropdown-menu">
        <li ng-click="placeholder = 'login'"><a>login</a></li>
        <li ng-click="placeholder = 'password'"><a>password</a></li>
      </ul>
    </div>

    <input class="form-control" name="type" placeholder="{{placeholder}}" ng-model="value">
  </div>

Collectives™ on Stack Overflow

Dropdown menu shows value in input AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related