CODEWITHSUNDEEP
angularjsangular-strap
Zexi Li
Zexi Li

Reputation: 452

angular-strap: input tag in modal and aside

I use an input tag in angular-strap modal:

<div class="modal-body" >
    <input type="text" placeholder="url" class="w-full" >
</div>

Then I type some words in it and close the modal with hide(). But next time I open the modal, I find that what I typed last time has gone. Am I doing something wrong?

Upvotes: 2

Views: 902

Answers (1)

Kevin F
Kevin F

Reputation: 2885

I made a working plunkr here: plunkr. Take note of making kmlUrl an object key instead of a straight var: AngularStrap bs-select not updating ng-model

The modal and page are now in sync with each other. The modal loads whatever is in $scope.model.kmlUrl and the page updates whenever you change it in the modal.

<div ng-controller="TestModal">
  <button type="button" ng-click="openTestModal()">
    Open Modal
  </button>
  <div ng-cloak="">
    {{ model.kmlUrl }}
  </div>
</div>
<script type="text/ng-template" id="test-modal.html">
  <input type="text" placeholder="url" ng-model="model.kmlUrl">
  <div class="modal-footer">
    <button type="button" ng-click="closeTestModal()">Close</button>
  </div>
</script>

(function(){
  angular.module('test', ['mgcrea.ngStrap']);

  angular.module('test').controller('TestModal', function($scope, $modal){
    var modal = $modal({
      scope: $scope,
      title: 'Test Modal',
      contentTemplate: 'test-modal.html',
      show: false
     });

    $scope.model = {
      kmlUrl: 'https://www.amazon.com'
    };

    $scope.openTestModal = function(){
     modal.show();
    };

    $scope.closeTestModal = function(){
      modal.hide();
    };

  });
})();

Upvotes: 1

Related Questions