Currently, I have successfully implemented a Miller column using Angular and Bootstrap.
To view the functionality in action, you can check out the code snippet at this link.
In the second column of my setup, clicking on a word opens up the third column. However, what I want now is for the checkbox to add that specific word to an array of search terms when clicked.
If the checkbox is unchecked, I need to remove that word from the search terms array. Although adding words works fine as shown in the pen, unchecking the box results in the word being added again.
The solution here lies in checking the state of the checkbox so that if it's true, the word will be added, and if false, the word will be removed from the array.
I am struggling with figuring out how to target and check only the checkbox that was clicked.
<div class="col-xs-3 inner-column">
<div class="panel panel-default">
<div class="list-group">
<div class="list-group-item" ng-class="{active: $index === pmt.millercolumn.level1Selected }" ng-repeat="level1 in pmt.millercolumn.level1 track by $index">
<input type="checkbox" ng-model="activeSearchTerm" ng-change="pmt.change($index)" id="ng-change-example1" />
<a href="" ng-click="pmt.getSublevel2($index)" >
{{level1.name}}
<i class="pull-right fa fa-angle-right fa-lg"></i>
</a>
</div>
</div>
</div>
When the ng-change event takes place on the checkbox, the following function is called:
_this.change = function (index) {
var searchTerm = _this.millercolumn.level1[index].name;
_this.searchTerms.push(searchTerm);
};