## Determining the “Indeterminate” Issue
You already know exactly what issue I’m referring to if you’ve ever tried to use a checkbox input with the indeterminate state for something other than a nested checklist. The scenarios are extremely rare, but when come across, people resort to strange ways of creating three way toggleable checkboxes, and hacky select inputs. In Nozzle’s specific situation, we needed a checkbox that could harness 2 “active” or toggleable values, and an off or null state. This would allow us to essentially “turn on” a filter that my have two “on” states eg. an off state, a true state, and a false state.

## A custom directive. Simple and elegant.
Here, I forewent dealing with checkboxes and select inputs all together, and focused on using angular’s magical databinding and directives to get the job done. Click here for the github repo! The AngularJS Triple-State Checkbox
The HTML in your template
```html
<tri-toggle ng-model="myValue"></tri-toggle>
```
Results in a toggle capable of three states:

![ng-tri-toggle](//images.contentful.com/z8uwv83tofbw/2lclksbC8ocWG2QKYysGIc/8b2e6ae7e48b5c5d99a6b0c8b4261f2f/ng-tri-toggle.png)

This is the Javascript you don’t see:
```javascript
  var ngTriToggle = angular.module('ngTriToggle', []);
  ngTriToggle
      .directive('triToggle', function($timeout) {
          return {
              restrict: 'E',
              replace: false,
              transclude: true,
              scope: {
                  ngChange: '&',
                  val: '=ngModel',
                  ngTrueVal: '=?',
                  ngngFalseVal: '=?',
                  ngNoVal: '=?',
                  tanner: '&'
              },
              template: '<div class="tri-toggle-wrap" ng-class="{\'true\': val==ngTrueVal, \'false\': val==ngFalseVal}" ng-click="toggle()"><div class="tri-toggle-false" ng-click="toggleFalse()"></div><div class="tri-toggle-true" ng-click="toggleTrue()"></div><div class="tri-toggle-handle" ng-click="toggleNone()"></div></div>',
              link: function(scope) {

                  if (!angular.isDefined(scope.ngTrueVal)) {
                      scope.ngTrueVal = 1;
                  }
                  if (!angular.isDefined(scope.ngFalseVal)) {
                      scope.ngFalseVal = 0;
                  }
                  if (!angular.isDefined(scope.ngNoVal)) {
                      scope.ngNoVal = null;
                  }

                  if (!angular.isDefined(scope.val)) {
                      scope.val = scope.ngNoVal;
                  }

                  scope.toggle = function() {
                      if (scope.val === scope.ngTrueVal) {
                          scope.val = scope.ngFalseVal;
                      } else if (scope.val === scope.ngFalseVal) {
                          scope.val = scope.ngNoVal;
                      } else {
                          scope.val = scope.ngTrueVal;
                      }
                      if (typeof scope.ngChange != 'undefined') {
                          $timeout(function() {
                              scope.ngChange(scope.val);
                          });
                      }
                  };
              },
          };
      });
```

It gives you the option to define custom true, false and null values:

```javascript
  <tri-toggle
      ng-model="myValue"
      ng-true-val="1"
      ng-false-val="0"
      ng-no-val="-1">
  </tri-toggle>
```

And also gives you a handy callback:
```javascript
  <tri-toggle
      ng-change="myFunction()"
      ng-model="myValue"
  </tri-toggle>
```

**Note: This callback is not a watcher. To detect programmatic changes to your model, set up a `$scope.$watch('myValue')` on your ng-model variable. That’s It!**

Now it’s super easy to create as many tri-toggles as you want with absolutely zero checkbox or select input hacking!

Enjoy!


ng-tri-toggle

You already know exactly what issue I’m referring to if you’ve ever tried to use a checkbox input with the indeterminate state for something other than a nested checklist. The scenarios are extremely rare, but when come across, people resort to strange ways of creating three way toggleable checkboxes, and hacky select inputs. This is a quick angular solution to rid yourself of that scenario.

ng-Tri-Toggle, an AngularJS Triple-State Checkbox Directive

Once upon a time, you built, or planned on building, an large scale Angular application. You probably thought about your file structure and module structure, making sure it fit into a widely used style guide that makes sense. Here at Nozzle, we take our style guides very seriously, and tried to make the best decision on how to modularize, and make our codebase extensible. One problem though, as it seems we could never get rid of were hard-coded image references, and the like. Anything pointing toward a static asset always seemed to start out like so:
```html
<img src="app/path/to/my/assets/images/myImage.png"/>
```

Assuming that you had a lot of images in your design, you probably got used to using find > replace a lot if your file structure changed. But what if your modules needed to be independent and sandboxed? We’ve come up with a tiny trick to help your modules be completely independent, regardless of where they sit in your file structure. This also opens up some shortcuts for a reverse-like dependency injection (importing one module that contains all references to child modules, or simply using a single child module with its parent as a dependency)
Enter Relative AngularJS Modules
Consider the parent module:

```javascript
  (function() {
    'use strict';

    var module = angular.module('myApp.things', []);

    var all = angular.module('myApp.things.all', [
      'myApp.things',
      'things.someThing',
      'things.someOtherThing',
      'things.someOtherOtherThing',
    ]);

    module.root = '/path/to/this/thing/';

    module.config(function(stateHelperProvider) {
      stateHelperProvider.setNestedState({
          name: 'things',
          url: '/things',
          templateUrl: module.root + 'directives/things/things.directive.html',
      });
    });
  })();
```
    
The module is declared, and a shortcut method for importing it and/or all of its children is also created. Then the module itself gains a paths property on which you can store any path to the root, partials, submodules or whatever else you need. Those properties can then be used to create constants for your module to use in your templates, bind to a scope property for use in image src or any other thing needing a file location. But really, what this allows in child modules is even cooler…

```javascript
  (function() {
    'use strict';

    var module = angular.module('things.someThing', ['myApp.things']);
    var parent = angular.module('myApp.things');

    module.root = parent.root + 'sub_module/someThing/';

    module.config(function(stateHelperProvider) {
      stateHelperProvider.setNestedState({
          name: 'things.someThing',
          url: "/someThing",
          templateUrl: module.root + 'someThing.html',
      });
    });
  })();
```

The child module is created with its dependency on the parent module, but then we also reference the parent module itself, then utilize the parent modules paths properties (or constants if you’ve created them) to build the paths for the child module. Those paths can then be accessed the same way by any child modules. This is AWESOME! Because as you can now guess, you can change the location of a module directory in your file structure, and as long as you reflect the changes in your module, all of your template, image, etc references will remain intact!

Hope this helps!

Enjoy.






Screen Shot 2017-05-26 at 6.11.57 PM

Once upon a time, you built, or planned on building, an large scale Angular application. You probably thought about your file structure and module structure, making sure it fit into a widely used style guide that makes sense. Here at Nozzle, we take our style guides very seriously, and tried to make the best decision on how to modularize, and make our codebase extensible. One problem though, as it seems we could never get rid of were hard-coded image references, and the like...

Dev Blog - Angular