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

same ng-model to display two different parameters on two different input boxes

本文关键字：两个 显示 参数 输入 ng-model      更新时间：2023-09-26

我有一个表单，其中数据加载在一个下拉列表中，该列表具有ng-model="placeid"，现在当用户从第一个ng模型中选择数据时，我希望它显示参数位置。输入框中所选选项的最小值。所以当用户从下面的列表中选择值时

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

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

您需要向作用域添加一个属性，该属性存储当前选定的位置，并将选择和输入绑定到该属性。所以你的控制器会像这样:

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

相关文章：