R
R
rtplv2017-01-20 02:53:23
JavaScript
rtplv, 2017-01-20 02:53:23

How to bind fields in Angular?

I'm using a leaflet map.
There was a following problem. You need to associate the coordinates (data.latitude and data.longitude) specified in the table with the list of addresses at each iteration:

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

With a map (well, or to imputs (2 minds at the same time)):
<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
        }
    });
}]);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question