私は次のようにする必要があります。その後、入力テキストにpasswordSelectは入力値を表示AngularJS
JSで$scope.logins同じからloginを示し、 "ログイン"：
$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;">
感謝。
使用ng-change：
<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;">
コントローラーで
$scope.logins = [{
"login" : "log",
"password" : "pass"
}];
$scope.onSelectBoxChange = function(selectedValue){
if(selectedValue=="login"){
$scope.value = $scope.logins[0].login;
}else{
$scope.value=undefined;
}
}
これはどのように受け入れられた答えになったのか分かりませんが、これはどちらのケースでも機能しません。 – Vivz
まずメソッド
あなたは、あなたが直接ログインをバインドすることができ、この
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>第2の方法
を達成するために$scope.$watchを使用することができますあなたの入力の型に関するオブジェクト。 （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>この1時間を試してみてくださいませんOPE、あなたがそれを好きになるでしょう。..
<html ng-app="app" ng-cloak>
<head>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
<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 >
// Code goes here
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.logins = [{
"login" : "log",
"password" : "pass"
}]
$scope.onSelectBoxChange = function(selectedValue){
if(selectedValue=="login"){
$scope.value = $scope.logins[0].login;
}else if (selectedValue=="password"){
$scope.value = $scope.logins[0].password;
}else{
$scope.value=undefined;
}
};
});
</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>
</head>
<body ng-controller="FirstCtrl">
<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" ng-model="type" >
<li ng-model="type" ng-click="onSelectBoxChange('login')"><a>login</a></li>
<li ng-model="type" ng-click="onSelectBoxChange('password')"><a>password</a></li>
</ul>
</div>
<input class="form-control" name="type" placeholder="value" ng-model="value">
</body>
</html>
をなぜあなたは私の答えを削除しましたか？ – Vivz