Using AngularJS to fill form textfield with text in <a> link on same page

Question

I am using AngularJS and it has one text form field on the page.

On the right hand side, I have a series of text links.

Whenever the user clicks on one of the text links, I would like the following to happen:

The text in that link fills the form field on the page
The image that is sitting above the text field disappears
The value of the text field is submitted via POST without the user needing to press return
If the user clicks on another text link, the same behavior (minus removing the image because it has already been removed)

Currently, the user can type text and hitting RETURN POST's the content. I do not want this capability to be impacted.

Here is the snippet from the .haml file:

    %div{:id => 'navigation'}
  %ul
    %li 
      %a{'ng-controller' => "MainController" , 'ng-app' => 'enter-linktext'}Who is Kaya?
    %li 
      %a Does Kaya know who I am?
    %li 
      %a How do I get started?
    %li 
      %a How do I load a coach?

This includes @Joao Leal's contributions and my original code:

angular.module("MainModule", [])
.controller("MainController", function ($scope, $http)
{
  $scope.chats = [];  
$scope.newChat = "";
  $scope.errors = [];

$scope.submitData = function ()
{
  //$scope.newChat = "submitting data..."   

  /* scope attaches to View */  

/* $http.post("http://requestb.in/qwrtysqw", null, config)*/
    $scope.chats.push($scope.newChat) /*this gets moved to success */

/*clear text field*/
  $scope.newChat = null
    $http({
        method: "POST",
        url: "http://floating-beyond-3787.herokuapp.com/angular",
        /*url: "https://worker-aws-us-east-1.iron.io/2/projects/542c8609827e3f0005000123/tasks/webhook?code_name=botweb&oauth=LOo5Nc0x0e2GJ838_nbKoheXqM0",*/
        data: {input: $scope.newChat}
    })

    .success(function (data)
    {
     // $scope.chats.push(data);
        $scope.chats.push($scope.newChat)
     // if successful then get the value from the cache? 

    })
    .error(function (data)
    {
      $scope.errors.push(data);
    });

  };

/*
.directive('enterLinktext', function() { return { scope: { submit: "=", //here you pass your controller's submit function textField: $scope.newChat //here you pass the scope variable which is bound to the text field }, link: function(scope, element, attr){ element.on("click", function(event){ //on click, find the image and hide it angular.element(document.getElementById("imageId")).hide();

          //copy the <a> text to the text field
          scope.textField = element.html();
          scope.$apply();

          //call the controller submit function (the one that posts the form)
          scope.submitData();

          event.preventDefault();
       });
    }
 }

}); */

});

Nobody will answer your question without your help. Show us what you've done so far, provide a fiddle or something else what makes it easy to help you out. I'm pretty sure we're not going to code the specific behavior for you! — gearsdigital
– gearsdigital, Commented Oct 11, 2014 at 23:20

Joao Leal · Accepted Answer · 2014-10-11 23:55:52Z

1

I assume that because of:

Currently, the user can type text and hitting RETURN POST's the content. I do not want this capability to be impacted.

That you currently have a function on your controller that does this when the user submits the form.

So to do the rest of what you want you can create a directive that would look something like this:

app.directive('directive', function() {
   return {
      scope: {
         submit: "=", //here you pass your controller's submit function
         textField: "=" //here you pass the scope variable which is bound to the text field
      },
      link: function(scope, element, attr){
         element.on("click", function(event){
            //on click, find the image and hide it
            angular.element(document.getElementById("imageId")).hide();

            //copy the <a> text to the text field
            scope.textField = element.html();
            scope.$apply();

            //call the controller submit function (the one that posts the form)
            scope.submit();

            event.preventDefault();
         });
      }
   }
});

answered Oct 11, 2014 at 23:55

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Satchel Over a year ago

oh I see...so directive would be the class for each <a> tag, right?

Satchel Over a year ago

and, yes, I do have something that checks for whether the key is UP for determine submission: <input id="yousay" name="input" size="90" onkeydown="if (event.keyCode == 13) { doTalk(); }"/>

Joao Leal Over a year ago

something like <a directive submit="submitFunction" text-field="textVariable">some other text here<a/>

Satchel Over a year ago

Let me try can't find ways to add example in haml

Satchel Over a year ago

Hi, this look right -- heheh, I just can't get it working in haml....we don't have the concept of a directive for this tag.....

|

Collectives™ on Stack Overflow

Using AngularJS to fill form textfield with text in <a> link on same page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related