I'm following a MEAN tutorial on Thinkster (https://thinkster.io/mean-stack-tutorial) and can't find a sollution for passing the route parameter.
My problem comes from this section in the tutorial (https://thinkster.io/mean-stack-tutorial#the-posts-page)
When I want to see the comments of a post (by passing the route parameter in my URL). The tutorial says :
For now, we will consider the index of the post to be its id. We can use $stateParams to retrieve the id from the URL and load the appropriate post.
Using the folowing code :
$scope.post = posts.posts[$stateParams.id];
<span>
Comments
</span>
I have no idea what I'm doing wrong. But I don't think my code runs through the PostCtrl controller.
Anyone knows what I'm doing wrong?`
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>
.glyphicon-thumbs-up {
cursor: pointer
}
</style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<!-- Waar de template moet geplaatst worden in actieve state !-->
</div>
</div>
<!-- Home state !-->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</span>
</div>
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<!-- Posts state !-->
</script>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comment | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
<!-- Andere state !-->
</body>
</html>
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}
]);
/* We creeeren een nieuw object dat een property posts heeft.
We geven dan die variabele (o) terug zodat deze door elke angular module kan gebruikt worden.
Je kan hier ook methode in exporteren
$scope.posts = posts.posts in MainCtrl --> Nu wordt elke wijziging opgeslaan in de service*/
app.factory('posts', [function () {
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope', 'posts',
function ($scope, posts) {
$scope.posts = posts.posts
$scope.posts = [{
title: 'post 1',
upvotes: 5
}, {
title: 'post 2',
upvotes: 2
}, {
title: 'post 3',
upvotes: 15
}, {
title: 'post 4',
upvotes: 9
}, {
title: 'post 5',
upvotes: 4
}];
$scope.addPost = function () {
if (!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [{
author: 'Joe',
body: 'Cool post!',
upvotes: 0
}, {
author: 'Bob',
body: 'Great idea but everything is wrong!',
upvotes: 0
}]
});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function (post) {
post.upvotes += 1;
};
}
]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
'post',
function ($scope, $stateParams, posts, post) {
$scope.post = posts.posts[$stateParams.id];
}
]);
You have re-declared $scope.posts in your MainCtrl, so changes in MainCtrl are never being reflected in your posts factory.
The problem is at:
$scope.posts = posts.posts;
$scope.posts = [{
title: 'post 1',
upvotes: 5
}, {
title: 'post 2',
upvotes: 2
}, {
title: 'post 3',
upvotes: 15
}, {
title: 'post 4',
upvotes: 9
}, {
title: 'post 5',
upvotes: 4
}];
The first statement is setting $scope.posts equal to your factory object, the second is setting it to a local array.
You should instead use push to add your data into the factory array.
$scope.posts = posts.posts;
$scope.posts.push({
title: 'post 1',
upvotes: 5
}, {
title: 'post 2',
upvotes: 2
}, {
title: 'post 3',
upvotes: 15
}, {
title: 'post 4',
upvotes: 9
}, {
title: 'post 5',
upvotes: 4
});
Also, you have an extra injection in your PostsCtrl, there is no post service to be injected.
A full working copy of your code with relevant changes is on plnkr.
Related
This is maybe real easy, don´t know. But i´ve only done this with a node/express backend.
But not quite surt how to do this, only with frontend and a json file, where my data is.
Right now it shows a list of all my posts, but i want to get the unique post:id when clicking on a button.
A simple posts.json file:
[{
id: 1,
title: 'Simple title1',
content: 'Sample content...',
permalink: 'simple-title1',
author: 'Peter',
datePublished: '2012-04-04'
}, {
id: 2,
title: 'Simple title2',
content: 'Sample content...',
permalink: 'simple-title2',
author: 'Peter',
datePublished: '2012-05-04'
}, {
id: 3,
title: 'Simple title3',
content: 'Sample content...',
permalink: 'simple-title3',
author: 'Thomas',
datePublished: '2012-06-04'
}]
Here is my app.js file:
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/posts',
templateUrl: 'partial-home.html',
controller: function($scope, $http){
$http.get('posts.json')
.success(function(data){
$scope.posts = data;
});
}
})
.state('viewdetails',{
url:'/posts/:id/:permalink',
templateUrl: 'view_details.html',
controller: function($scope, $http){
$http.get('source.json')
//get a single post here???
} }
And some of the code in my partial-home.html
<div class="row" style="margin-left:50px">
<!--row left-->
<div class="col-xs-8 col-sm-4 col-md-3 col-lg-5 box-background" ng-repeat="post in posts">
<!--column 1 left-->
<div class="col-md-4 img-space">
<img class="img-circle" alt="Bootstrap Image Preview" src="{{prov.picture}}" /></div>
<div class="col-md-4">
<h4>{{post.author}}</h4>
<p class="text-grey">
{{post.content}}
</p>
</div>
<a ui-sref="posts/:id" class="btn btn-primary btn-color" style="width:100%">View details</a>
</div>
<!--end column 1 left-->
</div>
<!--end row left-->
I know this isn´t in a mvc pattern, but just want to do it really simple.
Have only done this before with a mongoose, node backend. So hope for some ideas help.
Thanks.
You would use $routeParams to get the id from your route and then use that as a variable in your $http request url.
When fetching the same sourse.json file you can use that id to only assign the correct post to your view variable
https://docs.angularjs.org/api/ngRoute/service/$routeParams
I am coding a weather app with open weather and I would like to save the city (the input) as a variable to call it on another view. So I would like to type in Vienna, send it to result.html and post there the current weather and to check which clothes I should wear, e.g. if the emperature is under 20° the app should say that I should wear a jacket.
Here is my home.html:
<ion-view title="" hide-nav-bar="true" hide-back-button="true">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/appicon.png">
<h2>Weather App</h2>
<p>What clothes do you need?</p>
</div>
</div>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="City" ng-model="inputs.city">
</label>
<input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" />
</div>
</div>
</ion-content>
</ion-view>
Here my app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html'
})
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeCtrl', function($scope) {
$scope.forcastDisabled = true
})
.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) {
var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
$scope.getIconUrl = function(iconId) {
return 'http://openweathermap.org/img/w/' + iconId + '.png';
};
$scope.save = {};
$ionicLoading.show();
$scope.saveText = function (inputs) {
alert('Geht');
$location.path('result');
$scope.save = angular.copy(inputs);
$scope.inputs.city;
}
var vm = this;
// Vienna
var id = 2761369;
var city = 'Vienna';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city;
var request = {
method: 'GET',
url: URL,
params: {
q: city,
mode: 'json',
units: 'imperial',
cnt: '7',
appid: '938c0cf5969f353bc718735f59aeffd6'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
$scope.weather = response.data;
}).
catch(function(response) {
vm.data = response.data;
$scope.weather = response.data;
});
$ionicLoading.hide();
});
And last my result.html:
<ion-view view-title="Current Weather">
<ion-content>
<div class="list card">
<div class="item item-divider"><h1>City: {{weather.name}}</h1></div>
<div class="item item-thumbnail-left">
<img src="{{getIconUrl(weather.weather[0].icon)}}" />
<h1>{{weather.weather[0].main}}</h1>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Current Temperature: {{weather.main.temp}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's High: {{weather.main.temp_max}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's Low: {{weather.main.temp_min}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-waterdrop"></i>
<h2>Humidity: {{weather.main.humidity}}%</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-shuffle"></i>
<h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2>
</div>
</div>
</ion-content>
</ion-view>
I know I am not currently using the input, because I do not know how to do this in js. So how can I call my input in the url and then in the request?
Thanks in advance!
Try to:
Add the city variable as a parameter to your state definition:
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html',
params: {
city: null
}
})
Pass the variable to the target state:
$state.go("result", {city: inputs.city});
Inject the $stateParams service and use the variable in the controller:
var city = $stateParams.city;
See https://github.com/angular-ui/ui-router/wiki/URL-Routing for more details.
EDIT
Check out this plunker demonstrating my changes: https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz
Note that I moved the saveText() function to the HomeCtrl and removed the ng-controller directive from your home.html.
I'm following a tutorial on Thinkster to learn Angular and MEAN Stack, however I for some reason can't get my template to load inline with my loaded HTML. Can someone point out where I'm going wrong here? The code isn't coloring correctly, and the page doesn't render anything when loaded in a browser.
What am I not understanding about this? The template tags seem to not be matching?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>.glyphicon-thumbs-up {cursor:pointer}</style>
</head>
<body ng-app="flapperNews"><!--ng-controller="MainCtrl" style="margin-left:20px; margin-right:20px;"-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!-- Start template -->
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.title}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type='submit' class="btn btn-primary">Post</button>
</form>
</script>
<!-- end template -->
<!-- start template -->
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
<!-- end template -->
</body>
</html>
I'm getting this error:
Error: $injector:modulerr
Module Error
Here's my app.js
/*global angular*/
var app = angular.module('flapperNews', []);
angular.module('flapperNews', ['ui.router']);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 12},
{title: 'post 2', upvotes: 14},
{title: 'post 3', upvotes: 16},
{title: 'post 4', upvotes: 11},
{title: 'post 5', upvotes: 1}
];
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') {return;}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
}]);
Check your angular-ui-router.js library address it's cloudfare not cloudflare.
EDIT
Remove the unnecessary ; from the home state
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
and remove the line angular.module('flapperNews', ['ui.router']);
add the ui.router to the first line var app = angular.module('flapperNews', ['ui.router']);
To working JS:
var app = angular.module('flapperNews', ["ui.router"]);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 12},
{title: 'post 2', upvotes: 14},
{title: 'post 3', upvotes: 16},
{title: 'post 4', upvotes: 11},
{title: 'post 5', upvotes: 1}
];
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') {return;}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
}]);
HTML:
I'm following this tutorial to get familiar with the MEAN stack. I got to the point where they start using a routing configuration using ui-router. I've set everything up like they have it, but my page isn't rendering anything in my <ui-view> element.
(this was working before I added the routing config)
Here's what my files look like:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script scr="indexHomeState.js"></script>
<script src="indexController.js"></script>
<script src="postsService.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id='/home.html'>
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in indexCtrl.getPosts() | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="indexCtrl.incrementUpvotesForPost(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
<form ng-submit="indexCtrl.addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="indexCtrl.title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="indexCtrl.link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
routingConfig (indexHomeState.js)
angular.module('flapperNews')
.config('indexHomeState', indexHomeState);
indexHomeState.$inject = ['$stateProvider', '$urlRouterProvider'];
function indexHomeState($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'indexController as indexCtrl'
});
$urlRouterProvider.otherwise('home');
}
my angular app/controller declaration:
angular.module('flapperNews', ['ui.router'])
.controller('indexController', indexController);
indexController.$inject = ['postsService'];
function indexController(postsService) {
var vm = this;
vm.test = 'Hello world';
vm.getPosts = postsService.getPosts;
vm.addPost = postsService.addPost(vm.title, vm.link);
vm.incrementUpvotesForPost = postsService.incrementUpvotesForPost;
}
post service
angular.module('flapperNews')
.factory('postsService', postsService);
function postsService() {
var serv = this;
var posts = [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
];
function getPosts() {
return posts;
}
function addPost(title, link) {
if(!title || title === '') { return; }
posts.push({
title: vm.title,
link: vm.link,
upvotes: 0
});
vm.title = '';
vm.link = '';
}
function incrementUpvotesForPost(post) {
post.upvotes ++;
}
return {
getPosts: getPosts,
addPost: addPost,
incrementUpvotesForPost: incrementUpvotesForPost
}
}
Your code looks good only the thing you are missing is, you need to change
$urlRouterProvider.otherwise('home');
to
$urlRouterProvider.otherwise('/home');
Also you have misspelled the src to scr for indexHomeState.js, That restricting your JS files from loading
Scripts
<script src="indexController.js"></script>
As you don't have indexHomeState provider in your app, you shouldn't add indexHomeState as a string inside config block.
angular.module('flapperNews')
.config('indexHomeState', indexHomeState);
It would be simply
angular.module('flapperNews')
.config(indexHomeState); //removed `'indexHomeState',` from config
Demo Plunkr
<div ng-repeat="tack in feed">
<div class="pin" ng-if="selected == tack.boards">
<h3>{{ tack.title }}</h3>
<img src="{{ tack.imageURL || 'http://www.designofsignage.com/application/symbol/building/image/600x600/no-photo.jpg' }}" />
<p>
{{ tack.desc }}
</p>
<br>
<p>
<button ng-click="deleteTack(tack.link)" class="btn btn-danger">Delete</button>
</p>
</div>
</div>
I am trying to pass a value in a function written in my controller. But the value is not getting passed to the controller.
A string on other arguments is getting passed except for tack.link or any other value fetched from ng-repeat label.
Its Working Fine!!!
Take a look at this
Working Demo
html
<div ng-app='myApp' ng-controller="Controller">
<div ng-repeat="tack in feed">
<div class="pin" ng-if="selected == tack.boards"> <h3>{{ tack.title }}</h3>
<img src="{{ tack.imageURL || 'http://www.designofsignage.com/application/symbol/building/image/600x600/no-photo.jpg' }}" style="width:100px;height:100px;" />
<p>{{ tack.desc }}</p>
<br>
<p>
<button ng-click="deleteTack(tack.link)" class="btn btn-danger">Delete</button>
</p>
</div>
</div>
</div>
script
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.feed = [{
boards: 'selected',
link: 'link_1',
title: 'title_1',
desc:'desc_1'
}, {
boards: 'selected',
link: 'link_2',
title: 'title_2',
desc:'desc_2'
}, {
boards: 'selected',
link: 'link_3',
title: 'title_3' ,
desc:'desc_3'
}, {
boards: 'selected',
link: 'link_6',
title: 'title_6',
desc:'desc_6'
}, {
boards: 'selected',
link: 'link_4',
title: 'title_4',
desc:'desc_4'
}, {
boards: 'selected',
link: 'link_5',
title: 'title_5',
desc:'desc_5'
}];
$scope.deleteTack = function(link)
{
alert(link);
}
});