Hacker News Reader

Comment by hakaaaaak | Hacker News Reader

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>

View on HN

Or, 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.

Best 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

I 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.h...

This is what I was looking for. I gather the framework is allergic to conditionals.

Behavior 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.

I 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.

> 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 ?

It'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/

AngularUI has a ng-if directive, to keep the DOM clean (and specifically make CSS first-child/last-child work): http://angular-ui.github.com/

Reply on news.ycombinator.com