@rtplv

Как связать поля в Angular?

Использую карту leaflet.
Возникла следующая проблема. Нужно связать координаты (data.latitude и data.longitude) указанные в таблице со списком адресов на каждой итерации:

<table class="table table-striped col-md-6">
    <tr>
        <th class="col-md-3">Полный адрес</th>
        <th class="col-md-3">Координаты</th>
        <th class="col-md-4">Комментарий</th>
        <th class="col-md-1"></th>
    </tr>
    <tr class="edit-row" ng-repeat="item in addressList" ng-show="item.edit">
        <td><input type="text" ng-model="item.address"></td>
        <td><input type="text" ng-model="item.latitude" ng-bind="bounds.northEast.lat"><input type="text" ng-model="item.longitude"></td>
        <td><input type="text" ng-model="item.description"></td>
        <td><button class="btn btn-success" ng-click="item.edit = !item.edit">Сохранить</button></td>
    </tr>
    <tr class="info-row" ng-init="data.edit = false" ng-repeat="data in addressList" ng-hide="data.edit">
        <td>{{data.address}}</td>
        <td>{{data.latitude}}</b> / {{data.longitude}}</td>
        <td>{{data.description}}</td>
        <td>
          <button class="edit-btn btn btn-warning" ng-click="data.edit = !data.edit">
            <span class="glyphicon glyphicon-pencil"></span>
          </button>
          <button class="del-btn btn btn-danger" ng-click="removeAddress(data)">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </td>
    </tr>
</table>


C картой(ну или к импутам(2ум одновременно)):
<div>
   <form>
        Latitude NorthEast: <input type="number" step="any" >
        Longitude NorthEast: <input type="number" step="any" ng-model="bounds.northEast.lng">
        Latitude SouthWest: <input type="number" step="any" ng-model="bounds.southWest.lat">
        Longitude SouthWest: <input type="number" step="any" ng-model="bounds.southWest.lng">
    </form>
    <leaflet bounds="bounds" width="100%" height="400px"></leaflet>
</div>


[ '$scope', 'leafletBoundsHelpers', function($scope, leafletBoundsHelpers) {

    angular.extend($scope, {
        center: {},
        defaults: {
            scrollWheelZoom: false
        }
    });
}]);
  • Вопрос задан
  • 193 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы