AngularJS ng-click linking to a model

Question

I am building a small rss reader using Express(ie Jade) and Angular. I have a dropdown menu, where the menu items are populated by a list of items in a model. Whatever the user chooses as an item, there is a rss url attached to it and it should trigger a factory. This is the jade part:

div.btn-group
    button.btn.btn-info(type='button') {{loadButtonText}}
    button.btn.btn-info.dropdown-toggle(data-toggle='dropdown')
        span.caret
        span.sr-only Toggle Dropdown
    ul.dropdown-menu(role='menu')
        li(ng-repeat='rss in RSSList')
            a(href='#', ng-click="feedSrc='{{rss.url}}';loadFeed($event);") {{rss.Title}}
        input.form-control(type='text', autocomplete='off', placeholder="This is where your feed's url will appear" data-ng-model='feedSrc')

This is my angular controller:

var News = angular.module('myApp', []);
News.controller('FeedCtrl', ['$scope','FeedService', function($scope, Feed){
    $scope.loadButtonText = 'Choose News Feed';
    $scope.RSSList = [
        {Title: "CNN", url: 'http://rss.cnn.com/rss/cnn_topstories.rss'},
        {Title: "Reuters", url: 'http://feeds.reuters.com/news/usmarkets'}
    ];
    $scope.loadFeed = function (e) {
        Feed.parseFeed($scope.feedSrc).then(function (res) {
            $scope.loadButtonText=angular.element(e.target).text();
            $scope.feeds = res.data.responseData.feed.entries;
            }); }}]);
News.factory('FeedService', ['$http', function($http){
    return {parseFeed: function (url){
        return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q='+encodeURIComponent(url));}}
}]);

It seems feedSrc in ng-click doesn't capture rss.url and can not be passed as argument to the parseFeed function. I tried to pass rss.url directly into loadFeed, like this ng-click="loadFeed({{rss.url}});" and even ng-click="loadFeed('{{rss.url}}');" I didn't work either.

Riron · Accepted Answer · 2014-05-14 08:04:25Z

6

Simply pass it this way :

ng-click="loadFeed(rss.url)"

No need to use the {{ }} in ng-click

answered May 14, 2014 at 8:04

Riron

1,02314 silver badges18 bronze badges

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

Comments

Nidhish Krishnan · Accepted Answer · 2014-05-14 09:16:37Z

1

Why not to use just:

Jade:

a(href='#', ng-click="loadFeed(rss.url,$event)") {{rss.Title}}

Controller:

$scope.loadFeed = function (url, e) {
    Feed.parseFeed(url).then(function (res) {
      $scope.loadButtonText=angular.element(e.target).text();
      $scope.feeds = res.data.responseData.feed.entries;
 }); }}]);

edited May 14, 2014 at 9:16

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

answered May 14, 2014 at 8:03

akn

3,7221 gold badge29 silver badges46 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-click linking to a model

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related