CODEWITHSUNDEEP
javascriptangularjs
PaulVO
PaulVO

Reputation: 309

ng-repeat: Dynamically generate anchor tag and corresponding HTML page for object

Currenty, I'm repeating a hundreds of items in an array like so:

<div ng-repeat="item in items | orderby:-Date">
   <h3>{{post.Title}}</h3>
   <h4>{{post.Company}}</h4>
   <p>{{post.Description}}</p>
</div>

Which gets it's data from an object like this:

$scope.items = [
    {
        "ID" : "1",
        "Title" : "A"
        "Company" : "Company A",
        "Date" : "2016-06-22",
        "Description" : "..."
   },{
        "ID" : "2",
        "Title" : "B"
        "Company" : "Company B",
        "Date" : "2016-06-23",
        "Description" : "..."
    },{
        "ID" : "3",
        "Title" : "C"
        "Company" : "Company C",
        "Date" : "2016-06-21",
        "Description" : "..."
    }
]

What I'd like to do is generate a unique link for each of the above as in .../items/1.html / .../items/2.html based on their ID and generate an html structure on that page that has the same structure as that of the ng-repeat div, but obviously without repeating.

Is this possible in javascript / angularJS or do I need to look into creating database entries with mySQL for each of these ID's?

Upvotes: 0

Views: 826

Answers (1)

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2516

I am not sure but as far as i know you cannot create html files using angularjs but if you want to show html pages that have same html template you can use it using states.

.state('post',{
  url : '/post',
  abstract : true,
  templateUrl : 'some.html'
})
.state('post.id',{
 url : '/{id}',
 templateUrl : 'someHtml.html',
 controller : 'PostController'
});

in controller you can get the id's as 

app.controller('PostController',function($scope,$stateParams){
  $scope.id = $stateParams.id;
});

you can call the posts, as 

<a href="/post/{{item.id}}">View Post</a>

This will go to state /post/1 and so on depending on the ids from the json. Using the controller you can display your html of that particular post without needing to create physical html pages.

Upvotes: 1

Related Questions