用來自多個文本框的輸入形成地址列表序列

Question

我正在構造一個結構化地址序列，用於在Google地圖中進行搜索。 我在所有文本框中添加了ng-change來收集數據。 地址如下..

1. 地址第一行
2. 地址第2行
3. 區域
4. 市
5. 州
6. 國家

因此，當用戶開始輸入任何字段時，該地址應將自身構造為..

例如：“地址行1，地址行2，區域，城市，國家/地區”

HTML：

  <div class="row">
      <label class="label"> Address Line1</label>
    <input type="text" name="addressline1" ng-change="getAddress(address)" ng-model="address.line1"/>

     <label class="label"> Address Line1</label>
    <input type="text" name="addressline2" ng-change="getAddress(address)" ng-model="address.line2"/>

     <label class="label"> Area</label>
    <input type="text" name="area" ng-change="getAddress(address)" ng-model="address.area"/>

     <label class="label"> City</label>
    <input type="text" name="city" ng-change="getAddress(address)" ng-model="address.city"/>

     <label class="label">   State</label>
    <input type="text" name="state" ng-change="getAddress(address)" ng-model="address.state"/>

     <label class="label">Country</label>
    <input type="text" name="country" ng-change="getAddress(address)" ng-model="address.country"/>
    </div>
   <div class="row">{{enteredAddress}}<?div>

控制器：

 $scope.getAddresss=function (address) {
         if (address.addressLine1) {
                address = address.concat(',' + address.addressLine1);
            } else {
                address = address.addressLine1;
            }
            if (address.addressLine2) {
                address = address.concat(',' + address.addressLine2);
            } else {
                address = address.addressLine2;
            }
            if (address.area) {
                address = address.concat(',' + address.area);
            } else {
                address = address.area;
            }
            if (address.city) {
                address = address.concat(',' + address.city);
            } else {
                address = address.city;
            }
            if (address.state) {
                address = address.concat(',' + address.state);
            } else {
                address = address.state;
            }
            $scope.enteredAddress=address;
        }

但是這種邏輯在多種情況下都會失敗。 謝謝

Answer 1

是的，您可以使用

var app = angular.module("myApp", []);

app.controller("addressController", function($scope) {
    $scope.getAddress = function(address) {
        var line1 = $scope.address.line1 || '';
        var line2 = $scope.address.line2 || '';
        var area = $scope.address.area || '';
        var city = $scope.address.city || '';
        var state = $scope.address.state || '';
        var country = $scope.address.country || '';
        $scope.enteredAddress = line1 + ',' + line2 + ',' + area + ',' + city + ',' + state + ',' + country;
    };
});

這是鏈接

希望能幫助到你 ：）

Answer 2

更具聲明性

$scope.getAddress = function(address) {
    $scope.enteredAddress = 'line1|line2|area|city|state'
           .split('|') //create properties ordered list (array)
           .map(function(name) { return address[name]}) //get values
           .filter(Boolean) //remove empty
           .join(', '); //join with comma
}

Answer 3

$scope.getAddresss = function(address) {

var add1, add2, area, city, state, country;

if (address.addressLine1) {
add1 = address.addressLine1 + ', ';
}
if (address.addressLine2) {
add2 = address.addressLine2 + ', ';
}
if (address.area) {
area = address.area + ', ';
}
if (address.city) {
city = address.city + ', ';
}
if (address.state) {
state = address.state + ', ';
}

$scope.enteredAddress = add1 + add2 + area + city + state + country;
}

Answer 4

在Object.keys使用Array#map ，然后在Array#join

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.address = { line1: '', line2: '', area: '', city: '', state: '', country: '' }; $scope.enteredAddress = ''; $scope.getAddress = function(address) { var address = Object.keys(address).map(function(item) { return address[item]; }).filter(Boolean); $scope.enteredAddress = address.join(', '); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='myApp' ng-controller='myCtrl'> <div class="row"> <label class="label">Address Line1</label> <input type="text" name="addressline1" ng-change="getAddress(address)" ng-model="address.line1" />{{address.line1}} <label class="label">Address Line1</label> <input type="text" name="addressline2" ng-change="getAddress(address)" ng-model="address.line2" /> <label class="label">Area</label> <input type="text" name="area" ng-change="getAddress(address)" ng-model="address.area" /> <label class="label">City</label> <input type="text" name="city" ng-change="getAddress(address)" ng-model="address.city" /> <label class="label">State</label> <input type="text" name="state" ng-change="getAddress(address)" ng-model="address.state" /> <label class="label">Country</label> <input type="text" name="country" ng-change="getAddress(address)" ng-model="address.country" /> </div> <div class="row">{{enteredAddress}}</div> </div>