AngularJS bind specific data to template

Question

I'm currently making a switch from Knockout to Angular. The main problem I'm having right now is in transferring my original templates to something Angular will recognise.

Specifically, here's a bit of code I'm having trouble transferring:

In Knockout, this will attach Squares[5] to SquareTempl, so that when the template gets rendered, it does so using the members within Squares[5](or whatever data that gets attached).

I need to repeat the process for Squares[0]~Squares[11]. I can't use ng-repeat though since I won't be iterating through them in numerical order.

Ideally, it would be nice if I could do something along the lines of

<td class="Square" id="five" ng-include src="'SquareTempl.html'" ng-data="Squares[5]">

Any ideas?

Here's a JSFiddle I've written to outline a failed attempt I've tried using ng-model.

http://jsfiddle.net/fZz3W/9/

@Tyrsius I'm not sure what you mean exactly. ng-model instead of the fake ng-data I put up in my example? — dk123
– dk123, Commented Apr 9, 2013 at 2:17
@Tyrsius I've just tried, but I don't seem to be getting any luck. I think I'll post up an example for people to fiddle around with. Thanks for the comment! — dk123
– dk123, Commented Apr 9, 2013 at 2:23

Brandon Buck · Accepted Answer · 2013-04-09 03:06:09Z

2

Two things: First, you can make ng-data be available by implementing it yourself YourApp.directive("ngData", function() {}) Secondly, do you need the HTML to be part of another file? An easy way to accomplish what you're looking for in Angular is with ng-repeat like:

<td ng-repeat="item in Square">
    <div>{{item.name}}</div> 
</td>

When the Square array is updated an additional post will be made.

Review your modified JSFiddle: http://jsfiddle.net/TdWMF/1/

So this is mostly a hack to achieve what you want, until I can offer you a better solution:

Second update using mixed order ng-repeat: http://jsfiddle.net/TdWMF/3/

Basically:

<div ng-repeat="index in [4, 2, 0, 3, 1]">
   square index: {{index}}<br />
   square: {{Squares[index]}}
</div>

Pretty ugly, and non-ideal, I know. I'd also recommend performing the order array generate in a function and then doing: ng-repeat="index in displayOrder(Squares)"

edited Apr 9, 2013 at 3:06

answered Apr 9, 2013 at 2:55

Brandon Buck

7,1902 gold badges33 silver badges51 bronze badges

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

9 Comments

dk123 Over a year ago

I don't necessarily need the html to be in another file, but I can't use ng-repeat since I'm not rendering through the items in numerical order as I've stated above. I'll start looking into custom directives, but if you could, it would be nice if you could show me an example; I'm still having trouble getting my head around the basics of angularjs.

Brandon Buck Over a year ago

@dk123 If you aren't rendering them in order why use an array? Or, order them in the order you want to render them. Also, review the answer again I reformatted your original fiddle to use ng-repeat.

Brandon Buck Over a year ago

@dk123 I also apologize, I didn't notice the clause where you stated you couldn't use ng-repeat that's on me.

Brandon Buck Over a year ago

@dk123 If that is the case then I fear I don't know enough about your case to give you much more help. I do hope someone comes along and gives you a good anser though

dk123 Over a year ago

Thanks, it's great knowing that people like you are here wanting to give help.

|

Collectives™ on Stack Overflow

AngularJS bind specific data to template

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related