Question

我需要做这样的事情：当你选择前。 “登录”，然后在输入文字中显示login中的$scope.logins与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;">

提前感谢您的回答。

Answer 1

第一种方法

您可以使用$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>

第二种方法

您可以根据输入中的类型直接绑定logins对象。（在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>

Answer 2

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

Answer 3

试试这个希望你会喜欢它..

＆＃13;

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

＆＃13;

选择输入AngularJS中的显示值

3 个答案: