CODEWITHSUNDEEP
javascriptjqueryangularjs
rincuuk
rincuuk

Reputation: 37

POST in angular using input text

So i need to add list, but I can't use button and form. (Can't because im making single page aplication using angular)

So I have button + and when I press it appear input text. So I want to POST (create new list) after I type list name and hit ENTER, also I want after that hide the input again.

PROBLEM

How to say to angular that I entered new list name and pressed ENTER? I want something like: I press + , appears input, I enter list name, hit enter, my angular controller start work (POST data from input), input text hide.

MY CODE

My + "button":

  <a  href="javascript:hideshow(document.getElementById('adiv'))"> <div class="category theme_border_6" style="position: relative; left: 0px; float: left; margin: 10px 10px 10px 10px;  top: 0px;"><div class="name theme_title_color_3"> + </div>

<input type="text" ng-model="listname" id="adiv" ng-keypress="runScript(e)" class="form-control" style="font:24px bold; display: none" placeholder="NEW LIST" />

<div class="count theme_color_4_light"></div>
</div></a>

My script to show input text:

function hideshow(which){

    if (which.style.display=="none"){
        which.style.display="block";
    which.focus();}

    else
    which.focus();
    $(which).blur(function () {
    which.style.display = "none"
    });
}

My angular for post (runScript not working, but code below is fine, I just need to say somehow to angular that I pressed enter in input text field):

myApp.controller('createListController', ['$scope', '$log', '$http','$location',
    function($scope, $log, $http, $location ){

      $scope.runScript = function (e) {
          if (e.keyCode == 13) {
              var list = {
                  name: $scope.listname

              };
              console.log(e);
              $http({
                  method: 'POST',
                  url: 'http://localhost/anydocopy/public/lists',
                  data: list
              })
                  .success(function () {
                      console.log('true');
                      return $location.path('');
                  })
                  .error(function () {
                      console.log('false');
                  });
          }};
    }]);

Upvotes: 1

Views: 48

Answers (1)

S.Klechkovski
S.Klechkovski

Reputation: 4045

The problem is that you are not receiving the event object in your runScript function defined on the $scope. Change ng-keypress="runScript(e)" with ng-keypress="runScript($event)".

<!-- Example: --> 
<input type="text" ng-model="listname" ng-keypress="runScript($event)" .../>

Upvotes: 1

Related Questions