使用动态生成的链接动态更新html

Question

My app generates a list of words and turns those words into links. I want the user to be able to click those links and use the word as a search term. How do I retrieve the {{word.name}} from the HTML link? I don't want it to generate a new page if I click on the link. I just want to be able to retrieve the text in the link.

HTML:

  <li>
      <a ng-href="...">{{ word.name }}</a> 
  </li>

Controller.js

$scope.search = function() {
    $http.post('*', $scope.formData)
        .success(function(data) {
            $scope.formData     = {}; 
            $scope.word        = data;
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

Node.js server code:

  app.get('*', function(req, res) 
  {
      //get the {{ word.name }} from the HTML and use it to search
      //sql = select.....+word.name;
      connection.query(sql, function (err, result, fields) 
      {
         if(err) throw err;
         res.json(result);
      });
  });

Answer 1

You need to put the word on the form's post data.

When you make a post request you post some data on the server. You usually you do something like:

<form action="yourfile.php" method="post">
    <input type="text" name="key_word" value="Search a word ...">
    <input type="submit" value="Search">
</form>

This will post to yourfile.php the data key_word=theValueOfInput

to do so with javascript use:

<form id="myForm" action="yourfile.php" method="post">
   <input type="text" id="key_word" name="key_word" value="Search a word ...">
   <input type="submit" value="Search">
</form>
<script>
   function postMe(word){
      document.getElementById("key_word").value=word;
      document.getElementById("myForm").submit();
   }
</script>

<a onclick="postMe(this.innerHTML)">yourWord1Here</a>
<a onclick="postMe(this.innerHTML)">yourWord2Here</a>
<a onclick="postMe(this.innerHTML)">yourWord3Here</a>
...

Example : http://jsfiddle.net/Lyudj/2/

Answer 2

You can try

<li>
      <a href="#" ng-click="searchWord=word.name">{{ word.name }}</a> 
</li>

And on JS

$scope.search = function() {
    $http.post('*', $scope.searchWord)
        .success(function(data) {
            $scope.formData     = {}; 
            $scope.word        = data;
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};