The following screenshot shows how the three states of a checkbox are visualized in Internet Explorer 11. Other browsers visualize the states slightly different.
This is how the HTML for the tree checkboxes looks like:
Building the AngularJS TriStateCheckBox Directive
The directive offers two properties to bind against: isThreeState and isChecked. The CheckBoxScopeDeclaration class specifies these properties.
The $scope of the directive of type ICheckBoxScope holds the current values for these two properties. Additionally it offers a function updateState, which is used in the template of the directive to update the isChecked property whenever the checkbox is clicked.
How to Use the Directive in HTML
The goal for the directive built with AngularJS and TypeScript was to:
allow data binding in AngularJS
The first HTML snippet shows how the directive can be used to set the values in HTML:
The next snippet shows how data binding works. For each state there is a property in the controller: myBooleanValue1, myBooleanValue2 and myBooleanValue3. Each is bound to a checkbox to change the value and a span tag to display the current value.
The controller for the view contains the tree boolean values:
Here is the result for the view and the controller:
I regularly do trainings and workshops about web development with TypeScript and Angular. This week, I worked with a group of developers who have a non-web development background. They asked me to summarize the most important readings for learning about modern web development. Their problem isn't a lack of information. The amount of information on the internet is overwhelming and they asked for the really important resources. Here is my best-of-list.