从angularjs的下拉列表中选择值并在输入字段中使用它

Question

您好，我是angularjs的新手，正在制作一个单位转换器演示应用程序，我有两个单位下拉菜单（目标和源单位）。我想将选定的值输入到输入文本中，并希望对此进行一些计算。任何人都可以帮忙我这样做，我的代码如下：

html

 <body ng-app="starter" class="platform-android platform-cordova platform-webview">

    <ion-pane>
      <!--<ion-header-bar class="bar-stable">-->
        <!--<h1 class="title">Ionic - Teste DataBase</h1>-->
      <!--</ion-header-bar>-->
      <ion-content ng-controller="ExampleController as vm">
          <button class="button" ng-click="insert('Brian', 'Mendes')">Insert</button>
          <button class="button" ng-click="con()">Select</button>

        <button class="button" ng-click="show()">show</button>




<table>
<div>
    <tr>
        <td>{{ sourceunit }}</td><p>
        <td>
            <p>
        <div ng-repeat="address in addresses">
           Source Unit:
        <select
                ng-model="address.state"
                ng-options="state.lookupCode as state.description for state in lov_state"></select>
        <tt>State selected: {{address.state}}</tt>
        {{option.show1}}
        </div>
        </p></td>
        </p>
    </tr>


    <tr>
        <td>value</td>
        <td>
         <p><input type="number" style="background-color:lightgrey;" ng-click="sourcevalue" ng-model="value"></input></p>


        </td>
    </tr>

    <tr>
        <td>Destination_Unit</td>
        <td>
            <p>  <div ng-repeat="dest in dests">
            Source Unit:
            <select
                    ng-model="dest.state"
                    ng-options="state.lookupCode as state.description for state in lov_dest"></select>
            <tt>State selected: {{dest.state}}</tt>
            {{option.show1}}
        </div></p>
        </td>
    </tr>

    <tr>
        <td> Convert_Value</td>
        <td>   <input type="text" name="Address" placeholder="Converted value"
                      ng-model="dest.state" class="input-width" ng-init ="dest.state"/>
    </tr>

    <td>
        <p>

        </p></td>
    <select ng-click="temp()" ng-options="option for option in listOfOptions"
            ng-model="selectedItem">
    </select>


</div>
</table>

      </ion-content>
    </ion-pane>
  </body>

js

var db = null;
 var live=[];
 var src=[];
 var gUnit = '';
var example = angular.module('starter', ['ionic', 'ngCordova'])

example.run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {

        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if(window.StatusBar) {
            StatusBar.styleDefault();
        }


db = window.sqlitePlugin.openDatabase({name: "Converter.sqlite"});
console.log("database path:: " , db);

  });
})

example.controller("ExampleController", function($scope, $cordovaSQLite) {

 var vm = this;

  vm.unitList = [];
  gUnit ='';
  //temp jigar
   $scope.addresses = [{'state': 'Select Unit'} ];
   $scope.dests  = [{'state': 'Select Unit'} ];

      $scope.lov_state = [ {'lookupCode': 'Select Unit', 'description': 'Select Unit'}];
       $scope.lov_dest = [ {'lookupCode': 'Select Unit', 'description': 'Select Unit'}];

 $scope.show = function() {
//    alert("show function");
        var results=[];
        //alert("======MY SELECTED UNIT VALUE IS------>"+$scope.show1);
         var query = "SELECT unit,formula FROM Length;";
         $cordovaSQLite.execute(db, query).then(function(res) {
             if(res.rows.length > 0) {
              for (var i=0; i<res.rows.length; i++) {
                var unitname = res.rows.item(i).unit;
                 var unitvalue = res.rows.item(i).formula;
                   vm.unitList.push({name: unitname, value: unitvalue});
                    results.push( res.rows.item(i).formula);

                      $scope.lov_state.push({lookupCode: unitvalue, description: unitname});
                      $scope.lov_dest.push({lookupCode: unitvalue, description: unitname});
//
                          }
                            $scope.addresses  = results;
                           if (vm.unitList.length === 0) {
                                                  $scope.unit = false;
                                              } else {
                                                  $scope.unit = true;
                                              }
                                              vm.selectedUnit = gUnit;
                                               } else {
                                                      console.log("No results found");
                                                    }
         }, function (err) {
             console.error(err);
         });

         $scope.convertvalue = "6";
     }




$scope.sourceunit="Sourceunit";


$scope.show1= function(){

          var query = "SELECT unit FROM Length;";
          var results=[];
          $cordovaSQLite.execute(db, query).then(function(res) {
if(res.rows.length > 0) {

             for (var i=0; i<res.rows.length; i++) {

                    results.push( res.rows.item(i).unit);
                        $scope.list =results;
             }
             }
 else {

                  console.log("No results found");
              }
          }, function (err) {
              console.error(err);
          });
}

Answer 1

您可以使用$scope.$watch检查值是否更改。 值更改后将立即触发。

句法

$scope.$watch('variableName', function(newValue, oldValue){
  // do your logic here.
});

您可以参考以下JSFiddle作为参考。 这是一个非常基本的实现，应视为参考。

从angularjs的下拉列表中选择值并在输入字段中使用它

问题描述

1 个解决方案

解决方案1
0 2016-03-02 13:00:34

句法

从angularjs的下拉列表中选择值并在输入字段中使用它

问题描述

1 个解决方案

解决方案1 0 2016-03-02 13:00:34

句法

解决方案1
0 2016-03-02 13:00:34