angularjs custom view for each model

Question

I want to render different html templates (bound to a model) within ng-repeat.

<div ng-repeat="section in sections | filter:unansweredSections">

    // Here i want something like
    if section == children
        render div#children
    else if section == work
        render div#work

</div>


<div style="display:none" id="children">
    // i want to bind this to sections info
    <input ng-model="???.totalChildren" />
</div>


<div style="display:none" id="work">
    // i want to bind this to sections info
    <input ng-model="???.work1" />
    <input ng-model="???.work2" />
</div>

Now in the last two divs I actually want the inputs to be bound to parameters of concrete sections.

My model looks like this:

$scope.sections = [
    {"name" : "children","totalChildren" : 0},
    {"name" : "work","work1" : "","work2" : ""}
]

I could make it an object instead of an array

$scope.sections = {
    "children"  : {"totalChildren" : 0},
    "work"      : {"work1" : "","work2" : ""}
}

And then easily bind to it

<div style="display:none" id="children">
    <input ng-model="sections.childern.totalChildren" />
</div>

But then I can't use filter and ordering on it.

Perhaps I could dynamically compile the div, but i need a way to make the IF inside the repeater. — Alex
– Alex, Commented Jan 21, 2013 at 12:53

bmleite · Accepted Answer · 2013-01-21 14:13:36Z

2

There are many ways of doing this.

You can use ng-show (and/or ng-hide) to act like if's and show only the elements corresponding to each model (child or work). The problem of this approach is that it will just hide the elements from the oposing model and not remove them, which increases the DOM unnecessarily.
```
<div class="work" ng-show={{isWork()}}>work template</div>
<div class="child" ng-show={{isChild()}}>child template</div>
```

Use a directive like Angular-UI ui-if (this will avoid the problem of maintaing unnecessary DOM elements).

<div class="work" ui-if={{isWork()}}>work template</div>
<div class="child" ui-if={{isChild()}}>child template</div>

Create a custom directive to render your own templates for each model, like in this example fiddle: http://jsfiddle.net/bmleite/kbxJm/

answered Jan 21, 2013 at 14:13

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

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

1 Comment

Alex Over a year ago

The last fiddle was exactly what I needed. Thanks you very much.

Collectives™ on Stack Overflow

angularjs custom view for each model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related