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

时间:2014-06-05 01:03:31

标签: javascript node.js angularjs express

我的应用会生成一个单词列表,并将这些单词转换为链接。我希望用户能够单击这些链接并将该单词用作搜索词。如何从HTML链接中检索{{word.name}}?如果点击链接,我不希望它生成新页面。我只是想能够检索链接中的文本。

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服务器代码:

  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);
      });
  });

2 个答案:

答案 0 :(得分:0)

您需要在表单的帖子数据上添加单词。

当您发布帖子请求时,您会在服务器上发布一些数据。 你通常会做类似的事情:

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

这将发布到yourfile.php数据key_word = theValueOfInput

使用javascript使用:

<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>
...

示例:http://jsfiddle.net/Lyudj/2/

答案 1 :(得分:0)

你可以尝试

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

关于JS

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