Question

我对AngularJS中的输入字段有疑问。无论我在一个中写什么，我都会在另一个文本中得到完全相同的文本（field_start = field_end）。我究竟做错了什么？ ng-model是否有问题？

template.html

<form name="editForm" role="form" novalidate ng-submit="vm.save()">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
            ng-click="vm.clear()">&times;</button>
    <h4 class="modal-title" id="myPackLabel">Create offer</h4>
  </div>
  <div class="modal-body">
    <jhi-alert-error></jhi-alert-error>
    <div class="form-group">
      <label class="control-label" for="field_start">Miejsce startowe</label>
      <input type="text" class="form-control" name="field_start" id="field_start"
             ng-model="vm.transitPointStart.city" placeholder="np. Warszawa"
             />
    </div>
    <div class="form-group">
      <label class="control-label" for="field_end">Miejsce docelowe</label>
      <input type="text" class="form-control" name="field_end" id="field_end"
             ng-model="vm.transitPointEnd.city" placeholder="np. Wrocław"
             />
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
      <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span>Cancel</span>
    </button>
    <button type="submit" ng-disabled="editForm.$invalid || isSaving" class="btn btn-primary">
      <span class="glyphicon glyphicon-save"></span>&nbsp;<span>Save</span>
    </button>
  </div>
</form>

controller.js

(function() {
  'use strict';

  angular
  .module('myApp')
  .controller('AddOfferDialogController', AddOfferDialogController);

  AddOfferDialogController.$inject = ['$scope', '$stateParams', '$uibModalInstance', 'entity', 'ShipmentOffer', 'TransitPoint', 'PackageSlot'];

  function AddOfferDialogController ($scope, $stateParams, $uibModalInstance, entity, ShipmentOffer, TransitPoint) {
    var vm = this;
    vm.shipmentOffer = entity;
    vm.transitPointStart = entity;
    vm.transitPointEnd = entity;

    vm.save = function () {
      vm.shipmentOffer.date = new Date();
      TransitPoint.save(vm.transitPointStart);
      TransitPoint.save(vm.transitPointEnd);
      ShipmentOffer.save(vm.shipmentOffer);
      $uibModalInstance.close();
      vm.isSaving = false;
    }

    vm.clear = function() {
      $uibModalInstance.dismiss('cancel');
    };
  }
})();

Answer 1

您在两个引用中使用相同的对象：

vm.transitPointStart = entity;
vm.transitPointEnd = entity;

也许您需要创建一个克隆以在引用中包含不同的对象（这取决于您的要求）：

vm.transitPointStart = Object.assign({}, entity);
vm.transitPointEnd = Object.assign({}, entity);

输入字段显示相同

1 个答案: