4 ms·
Like this: <ul> <li ng-repeat="name in names">{{name}}</li> <li ng-show="!names.length">There are no names in the list</li> </ul>
by hakaaaaak 14y ago
Like this:
<ul>
<li ng-repeat="name in names">{{name}}</li>
<li ng-show="!names.length">There are no names in the list</li>
</ul>
- myhf 14y agoOr, if you don't want the "no names" item in the list at all when it's inapplicable, instead of merely hidden: <div ng-switch="names.length"> <ul ng-switch-when="0"> <li>There are no names in the list.</li> </ul> <ul ng-switch-default> <li ng-repeat="name in names">{{name}}</li> </ul> </div> Either way you end up with an ugly dom.
- jcampbell1 14y agoThis is what I was looking for. I gather the framework is allergic to conditionals.
- hakaaaaak 14y agoBehavior can be provided through directives via elements, attributes, css class names, and comments. It isn't "allergic to conditionals". It just drives the logic elsewhere to keep the presentation layer looking as clean as possible to the developer so that you can either focus on the view (template) or the controller or model.
- jcampbell1 14y agoI think you described exactly what I meant by "allergic to conditionals": a philosophy that conditional logic never belongs in the presentation layer. I didn't intend to imply a value judgement.
- taligent 14y ago> I didn't intend to imply a value judgement. I will. That seems dumb. Why are conditionals not allowed in presentation layer but repetition is ?
- nilliams 14y agoIt's a judgement call. Some people are wary that going nutty with conditionals in templates could result in littering bits of 'business logic' in them - they prefer to take an all-or-nothing stance and go for nothing. Personally I like the sort of middle-ground approach that Handlebars [1] has, I'm fine with basic 'truthy/existence' type checks, but will avoid templating languages that allow 'any old code'. I think this sort of discipline (picking a deliberately restrictive library) is probably more useful for teams than individuals (who are capable of limiting their own conditional crazy). [1] http://handlebarsjs.com/ http://handlebarsjs.com/
- adamauckland 14y agoI think if you're starting to add more logic in, you're expected to make your own directives and transclude like in http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.h...
- pieceofpeace 14y agoBest approach would be to use the 'ui-if' directive from angular-ui <ul> <li ng-repeat="name in names">{{name}}</li> <li ui-if="!names.length">There are no names in the list</li> </ul> : http://angular-ui.github.com/#directives-if http://angular-ui.github.com/#directives-if
- Guillaume86 14y agoAngularUI has a ng-if directive, to keep the DOM clean (and specifically make CSS first-child/last-child work): http://angular-ui.github.com/ http://angular-ui.github.com/