Javascript 相同的ng模型在两个不同的输入框上显示两个不同的参数

我有一个表格，其中数据加载在下拉列表中，下拉列表中有

ng model=“placeid”

，现在当用户从第一个ng模型中选择数据时，我希望它在输入框中显示所选选项的参数place.lat。 因此，当用户从下面的列表中选择值时

<select class="form-group" ng-model="placeID" required>
    <option size=50 value="" disabled selected>Select a place</option>
    <option ng-repeat="place in places.places" value="{{place.placeID}}">{{place.name}}</option>
</select>

选择一个地方
{{place.name}

纬度参数应显示在下面的框中：

<input ng-model="placeID" type="text" name="q" size="31" placeholder="{{place.name}}" maxlength="255">

---

为了说明这一点，我所做的工作的目的是在下拉列表中提供一个表单，用户可以提交该表单，并且输入是google地图搜索的一部分。

您需要在范围中添加一个属性，用于存储当前所选位置，并将选择和输入绑定到该属性。因此，您的控制器希望如下所示：

var app = angular.module('myApp', []);
app.controller('placeCtrl', function ($scope) {
    $scope.places = [
        {
            placeID: 1,
            name: 'Place 1',
            lat: 123,
            long: 321
        },
        {
            placeID: 2,
            name: 'Place 2',
            lat: 456,
            long: 654
        },
        {
            placeID: 3,
            name: 'Place 3',
            lat: 789,
            long: 987
        }
    ];

    $scope.selectedPlace = $scope.places[1];
});

<div ng-controller="placeCtrl">
    <select ng-model="selectedPlace" ng-options="place.name for place in places">
    </select>
    <br />
    <input ng-model="selectedPlace.placeID" type="text"></input>
    <input ng-model="selectedPlace.lat" type="text"></input>
    <input ng-model="selectedPlace.long" type="text"></input>
</div>

HTML页面如下所示：

var app = angular.module('myApp', []);
app.controller('placeCtrl', function ($scope) {
    $scope.places = [
        {
            placeID: 1,
            name: 'Place 1',
            lat: 123,
            long: 321
        },
        {
            placeID: 2,
            name: 'Place 2',
            lat: 456,
            long: 654
        },
        {
            placeID: 3,
            name: 'Place 3',
            lat: 789,
            long: 987
        }
    ];

    $scope.selectedPlace = $scope.places[1];
});

<div ng-controller="placeCtrl">
    <select ng-model="selectedPlace" ng-options="place.name for place in places">
    </select>
    <br />
    <input ng-model="selectedPlace.placeID" type="text"></input>
    <input ng-model="selectedPlace.lat" type="text"></input>
    <input ng-model="selectedPlace.long" type="text"></input>
</div>

---

下面是一个示例：

它对我不起作用，其次，select标记中的数据有一个value=“placeID”原因，因为我正在传递要发布的值，对于输入，它只是前端，因为我需要在输入框中显示的纬度和经度需要传递到地图以显示位置。我认为您在尝试将value属性设置为placeID以及将select元素绑定到所选对象时会遇到问题。如果可能的话，我认为最好的选择是为placeID创建一个输入框，当用户更改select标记中的选择时，该输入框将被更新。如果不想让用户看到，甚至可以将placeID隐藏起来。为此，我更新了我的答案和JSFIDLE示例。