CODEWITHSUNDEEP
angularjsformssubmit
Saeed Abbaspour
Saeed Abbaspour

Reputation: 329

How to prepend content of a form on form submit using AngularJS

I am trying to learn angularJS and have problem figuring out how to solve this issue. I am trying to prepend content of the form when user submit the form. This is my code but it's not working. Can anyone help me to figure out where the problem is? Thanks!

angular.module("displayText", [])
  .controller("submitText", function($scope) {
    $scope.outputArr = [];
    $scope.print = function() {
        $scope.outputArr.push($scope.inputText);
        $scope.inputText = '';
      };
    };
  });
<body ng-app="displayText">
  <div ng-controller="submitText">
    <form method="get" action="#">
      <input type="text" name="input" ng-model="inputText" required/>
      <button ng-click="print(inputText)">Submit</button>
    </form>
  </div>

  <div>
    <p ng-repeat="text in outputArr">{{text}}</p>
  </div>
</body>

Upvotes: 0

Views: 174

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

put this piece of code inside the submitText controller div

<div>
    <p ng-repeat="text in outputArr">{{text}}</p>
</div>

then you whole code should be like

<div ng-controller="submitText">
   <form method="get" action="#">
      <input type="text" name="input" ng-model="inputText" required/>
      <button ng-click="print(inputText)">Submit</button>
   </form>

  <div>
      <p ng-repeat="text in outputArr">{{text}}</p>
  </div>
</div>

here is the Plunker

in your case the ng-repeat="text in outputArr" is out of the controller that means scope of the submitText controller not accessible for the ng-repeat that's why its not print anything

Upvotes: 1

Related Questions