选择显示输入值AngularJS

我需要这样做：当您选择前。 “登录”，然后在输入文本显示来自$scope.logins同样login与password选择显示输入值AngularJS

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;">

感谢提前答案。

来源

2017-08-02 bafix2203

你为什么要删除我的答案吗？ – Vivz

使用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; 
    } 
}

来源

2017-08-02 11:15:17

我不明白这是如何成为公认的答案，这对两种情况都不适用？ – Vivz

第一种方法

您可以使用$scope.$watch来完成这个

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>

第二种方法

您可以直接绑定登录与输入中的类型相关的对象。（在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>

来源

2017-08-02 11:14:52 Vivz

试试这一个H 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>

来源

2017-08-11 10:03:50

选择显示输入值AngularJS

回答

相关问题