Getting generic anchor text on click with angularJS/jQuery returns empty string

Question

I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be).

I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use it in a post request (basically you click the article title in the newsfeed and it takes you to the whole article).

here's my html:

<div id="articles-sidebar">
    <h2>Search articles archive:</h2>
    <form id="searchbox" method="post">
        <input name="searchword" type="text" placeholder="author, title, keyword...">
        <input type="submit" value="Search">
    </form>
    <div id="author">
    </div>
</div>
<div id="articles-feed">
    <div class="article-box" ng-repeat="article in articles">
        <h1><a href="" ng-click="findArticleByTitle()">{{ article.title }}</a><h1>
        <h3><a href="">{{ article.name }}</a>&nbsp;|&nbsp;{{ article.posted | date:"dd.MM.yyyy" }}</h3>
        <ul class="article-categories">
            <li class="article-category">{{ article.cat_name }}</li>
        </ul>
        <p>{{ article.extract }}</p>
    </div>
</div>
<div id="comments-box">
    <form id="comment" method="post">
        <textarea name="comment-text" placeholder="Your comment..."></textarea>
        <input name="submit-comment" type="submit" value="Post Comment">
    </form>
    <div id="comments-feed">
    </div>
</div>

and my controller:

'use strict';

angular.module('ptcAngularJsApp')
    .controller('ArticlesCtrl', function ($scope, $http) {
        //
        $scope.articles = [];

        $http.get('http://localhost/PTC_db_PHP/articles.php').
            success(function(response) {
                $scope.articles = response;
            }). //end http get success
            error(function(err) {
                console.log(err);
            }); //end http get error

        $scope.findArticleByTitle = function() {
            var title = $(this).text();
            console.log(title);
        }; //end findArticleByTitle 
        });

Is there an easier way to do this using $scope.articles?

So far when I click on the anchor (the article title), I'm only getting an empty string. Any idea why?

thanks for the help

Answer 1

You are mixing jquery with angular logic with var title = $(this).text(); . You shouldn't try to do this. the $("this") is not referencing what you think it is in that context. You could try logging it to see what I mean.

Instead, just pass back the object

 ng-click="findArticleByTitle(article)"

then you have access to the object and can pull off whatever you need.

  $scope.findArticleByTitle = function(article) {
      //do whatever you need with this object
     console.log(article);

  };