This particular issue is proving to be a bit challenging for me to articulate, but I'll give it my best shot. I'm currently working on implementing Angular checkboxes with their ng-true-value attribute in conjunction with a dynamic ng-model.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="asset in asset">
<h5>{{ asset.title }} categories are...{{ asset.category[0] + " and " + asset.category[1] }}</h5>
<div class="form-group">
<label>Business</label>
<div class="checkbox" ng-repeat="category in categoryFactory.business">
<input type="checkbox" id="{{category}}" ng-true-value="{{'category'}}" ng-model="asset.category[$index]">
<label for="{{category}}">{{category}}</label>
</div>
</div>
<div class="form-group">
<label>Personal</label>
<div class="checkbox" ng-repeat="category in categoryFactory.personal">
<input type="checkbox" id="{{category}}" ng-true-value="{{'category'}}" ng-model="asset.category[$index]">
<label for="{{category}}">{{category}}</label>
</div>
</div>
</div>
</div>
My ultimate goal is that when I load up my asset (as shown below), it will be displayed as depicted in the image here, with the appropriate checkboxes checked. The Business and Personal categories are sourced from a factory, and each checkbox within the form-groups stems from an ng-repeat list defined in the Business/Personal sections of the factory.
$scope.asset = [{
title: "Sales Agreement",
category: ["finance-admin", "running-a-business"]
}];
The main challenge lies in correctly implementing the ng-model within the checkboxes. Since each asset can belong to one or more categories, the approach needs to be dynamic. I've attempted to utilize $index to make my ng-model dynamic...
ng-model="asset.category[$index]"
However, this approach does not seem to yield the desired results. It's possible that I am overlooking something simple, so any assistance would be greatly appreciated.
Thank you! By the way, here is the JSFIDDLE link.