Question

我有一个表单，其中数据加载到具有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>

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

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

为了说清楚，我正在做的目的是在下拉列表中有一个用户可以提交和输入的表格是谷歌地图搜索的一部分。

Answer 1

您需要在范围中添加一个属性，用于存储当前选定的位置，并将select和输入绑定到该属性。所以你的控制器会喜欢这样的东西：

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];
});

HTML页面如下所示：

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

以下是一个示例：jsfiddle example

相同的ng-model在两个不同的输入框上显示两个不同的参数

1 个答案: