Filter on deep object properties in angularjs

AngularJS provides a neat way of filtering arrays in an ng-repeat tag by piping elements to a built in filter filter which will filter based on a predicate. Doing it this way you can filter items based on a function, or an expression (evaluated to a literal), or by an object.

When filtering by an object you can pass in a javascript object that represents key value items that should match whats in the backing data element. For example:

$scope.elements = [{ foo: "bar" }, { foo: "biz" }]


<div ng-repeat="foos in elements | filter: { foo: "bar" }">
  {{ }} matches "bar"

Here I filtered all the objects whose foo property matches the value “bar”. But what if I have a non-trivial object? Something with lots of nested objects? I found that passing in the object to the filter was both unweidly, and error prone. I … Read more


Angular with typescript architecture

Bear with me, this is going to be a long post.

For the past several months I’ve been working on a production single page application written with AngularJS and TypeScript, and I wanted to share how myself and my team have architected the application. In case you were wondering, the app was written using typescript 0.8.3 and not 0.9.1 (which is out now with generics).

In general, I was really unhappy with a lot of the AngularJS examples I had found on the internet when researching how to structure the application, since they all looked flimsy and poorly constructed. While the examples found online were easy to read and follow, they clearly wouldn’t work with an actual large application.

I had several goals:

  • I didn’t want to have to constantly register directives/filters/controllers/etc with Angular everytime I added something
  • I didn’t want to have to update my main index.html page with
Read more

, ,

Tech Talk: AngularJS

Today’s tech talk was a continuation on front-end discussions we’re having. Last week we talked about typescript (I forgot to write it up) and this week we discussed the basics of angular. Angular is a front-end MVC framework written by google that, at first glance, looks completely different from previous javascript/html development. The basic gist is to strongly decouple logic into encapsulated modules. But that’s not all there is, there’s a lot to it. Angular has a templating engine, dependency injection, double bindings between views and controllers, event dispatching, etc.

Since it’s hopeless to cover all of angular in one blog post I’ll just mention a few of the good questions that came up during our discussion

  • Can a child component dispatch to a parent component? Let’s say something happened in an innner component and you need a parent compoinent to also register that?
    Sure, angular provides a function
Read more