下拉菜单显示输入值AngularJS

-1

我需要做这样的事情：当你点击前。 “登录”，在<ul class="dropdown-menu">，然后在输入文本显示来自$scope.logins同样login与password下拉菜单显示输入值AngularJS

$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

感谢您的帮助提前！

来源

2017-08-11 bafix2203

什么问题？你到目前为止尝试了什么？ –

[Select显示输入AngularJS中的值的可能的重复]（https://stackoverflow.com/questions/45458970/select-shows-value-in-input-angularjs） – Vivz

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>

来源

2017-08-11 08:06:21

试加ng-click到li标签和init value模型。

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

来源

2017-08-11 08:07:40

我不想将'登录'赋值，我想把logins.login – bafix2203

更新到这个'

' –

下拉菜单显示输入值AngularJS

回答

相关问题