background preloader

Angular

Facebook Twitter

Replacing switch statements with Object literals @toddmotto. In many programming languages, the switch statement exists - but should it any longer?

Replacing switch statements with Object literals @toddmotto

If you’re a JavaScript programmer, you’re often jumping in and out of Objects, creating, instantiating and manipulating them. Objects are really flexible, they’re at the heart of pretty much everything in JavaScript, and using them instead of the switch statement has been something I’ve been doing lately. What is the switch statement? If you’ve not used switch before or a little unsure what it does, let’s walk through it.

What switch does it take input and provide an output, such as code being run. Let’s look at a usual switch statement: It’s similar to if and else statements, but it should evaluate a single value - inside the switch we use a case to evaluate against each value. When you start seeing lots of else if statements, something is likely wrong and generally you shoud use something like switch as it’s more suited for the purpose and intention. Problems with switch Object Literal lookups Summing up. Update the Model on enter key pressed with Angularjs. In angularjs, the ngModel directive is used for setting up a two way data binding between an input element and the underlying model.By default, the model is updated when the input value changes, for example while the user is typing.

Update the Model on enter key pressed with Angularjs

Based on your scenario, having the model updated immediately may or may not be desierable.With version 1.3, angularjs introduces the ngModelOptions directive which gives you better control of when / how the model is updated from the view. In my case, I needed to prevent the model from being updated until the user pressed ‘enter’, or until the input element lost focus. The next thing to do is update the model when the ‘enter’ key is pressed.To achieve this, you need control of when the ngModel directive updates the model. Angular directives for Bootstrap. Dependencies This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS.

Angular directives for Bootstrap

As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: AngularJS (requires AngularJS 1.3.x, tested with 1.4.5). 0.12.0 is the last version of this library that supports AngularJS 1.2.x. Bootstrap CSS (tested with version 3.1.1). Files to download Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. Alternativelly, if you are only interested in a subset of directives, you can create your own build. Whichever method you choose the good news that the overall size of a download is very small: <76kB for all directives (~20kB with gzip compression!) Installation As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module: Jeffry Houser's Blog: Why didn't my Angular View update after changing the $Scope variable?

Binding in AngularJS works magically.

Jeffry Houser's Blog: Why didn't my Angular View update after changing the $Scope variable?

When an element in the controller changes the view is updated automatically. When an input in the view is updated, the controller value is automatically updated. This is because every time the user interacts with the app, AngularJS automatically runs the $digest() method which automatically updates all bindings.

I am working on an app for a client that needed to execute JavaScript code when a binding changes. I had one view, and controller, which displayed some data filtering options to the user. However, I discovered that when the results came back from the service call, the view was not updating with the new data. There are a few things at play here and I'm going to start with some simple examples of binding, then expand to discuss $watch(), and finally I'll talk about how to use $apply() to solve the problem.

Setting up a Simple Application with Binding To demonstrate watches I'm going to start with a simple application. AngularJS: $watch, $digest and $apply. While browsing reddit, I read an article I felt over-complicated an explanation of $watch, $digest and $apply, and perhaps gave people a little bit of the wrong idea about what it is.

AngularJS: $watch, $digest and $apply

Banging Your Head Against an AngularJS Issue? Try This. Have you been debugging something that seems trivial in Angular for so long that your face looks like this?

Banging Your Head Against an AngularJS Issue? Try This

As I’ve gotten a little into AngularJS I’ve been surprised by how often my assumptions about how things will work have turned out to be wrong. When you start to form a basic mental model of how Angular works and you hit your first stumbling block where your model turns out to be incorrect it can be really, really, frustrating. In particular I had one issue that kept cropping up so often I began trying it before running to Google for help if something wasn’t working the way I would have expected (all my views should just magically sync up with what’s on $scope, right?).