如何在angular JS中基于国家选择预先选择电话代码

我喜欢有一个国家选择下拉，并基于国家选择，下面的输入框的电话号码应自动预选手机号码代码。

我会保存电话号码国家代码和国家。

我见过这个活塞plnkr.co/edit/DYyfGj?p=preview，但它不是我想要达到的效果。

这是我到目前为止所尝试的:

HTML:

<select ng-model="country" 
    ng-options="country.name for country in countriesWithPhoneCode" 
    >
    <option value="">Select country</option>
  </select>
  {{country}}

目前，上述代码列出了国家。根据选择，我需要为下一个输入预先填充拨号代码。

这是我的活塞https://plnkr.co/edit/zmTmpgCJ70N0MOO2UW4U?p=preview

就我对这个问题的理解，

https://plnkr.co/edit/sbWy7xOKWSzdDZuY2xWk?p =

预览

Country : <select ng-model="country" ng-options="country.name for country in countriesWithPhoneCode">
              <option value="">Select country</option>
          </select>
<br/><br/>
Phone :   <input value="{{country.dial_code}}" disabled/>
          <input ng-model="phone"/>
<br/>
{{country.name}} - {{country.dial_code}} {{phone}}

// Code goes here
var app = angular.module('myApp',
    []);
app.controller('countryCtrl', [
        '$scope',
function($scope) {
$scope.countriesWithPhoneCode = [
{
"name": "Afghanistan",
"dial_code": "+93",
"code": "AF"
},
{
"name": "Aland Islands",
"dial_code": "+358",
"code": "AX"
},
{
"name": "Albania",
"dial_code": "+355",
"code": "AL"
},
{
"name": "Algeria",
"dial_code": "+213",
"code": "DZ"
},
{
"name": "AmericanSamoa",
"dial_code": "+1684",
"code": "AS"
},
{
"name": "Andorra",
"dial_code": "+376",
"code": "AD"
},
{
"name": "Angola",
"dial_code": "+244",
"code": "AO"
},
{
"name": "Anguilla",
"dial_code": "+1264",
"code": "AI"
},
{
"name": "Antarctica",
"dial_code": "+672",
"code": "AQ"
},
{
"name": "Antigua and Barbuda",
"dial_code": "+1268",
"code": "AG"
},
{
"name": "Argentina",
"dial_code": "+54",
"code": "AR"
}
];
}]);

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-controller="countryCtrl">
  Country : <select ng-model="country" ng-options="country.name for country in countriesWithPhoneCode">
    <option value="">Select country</option>
  </select>
<br/><br/>
 Phone : <input value="{{country.dial_code}}" disabled/>
<input ng-model="phone"/>
<br/>
{{country.name}} - {{country.dial_code}} {{phone}}
</body>
</html>

相关内容

最新更新

热门标签：