I have a navigation menu that I am building based off of a json object coming from an $resource. Sometimes I need to append to this list with new menu items from another $resource.
I want to bind the ng-show attribute of this navigation item to a check box.
How can I bind the checkbox to its corresponding item in the navigation?
Here is what builds the nav items.
<li ng-repeat="navItem in navigation track by $index" title="{{navItem.title}}">
<div ng-show="navItem.visible" ng-disabled="navItem.disabled" ng-click='navigateTo(navItem.page)'>
<i ng-class="navItem.iconClass"></i><span class="sr-only">{{navItem.title}}</span>
</div>
</li>
Here is a sample of the json object I am currently using for the nav $resource.
{
"title": "Contracts",
"page": "contracts",
"label": "Contracts",
"disabled": true,
"visible":true,
"iconClass": "fa fa-file-o"
}
Here is the check box that may or may not need to be bound to the navigation item.
<div class="form-group" ng-repeat="service in service.exclusive">
<input type="checkbox" id="service_{{service.id}}" ng-model="summary.exclusive[service.id]" value="{{service.id}}">
<label for="service_{{service.id}}">{{service.name}}</label>
</div>
Here is the JSON for the service $resource.
"service":[
"exclusive": [
{
"id": "screening",
"name": "Screening",
"hasForm": "true",
"navigationButton": {
"title": "Screening",
"page": "screening",
"label": "Screening",
"disabled": true,
"visible":false,
"iconClass": "fa fa-pencil"
}
}
]
]
Here is how I am adding my new navigation item.
$scope.services.$promise.then(function (services) {
angular.forEach(services.exclusive, function (currentObj) {
if (currentObj.hasForm) {
$scope.navigation.$promise.then(function () {
$scope.navigation.splice(1, 0, currentObj.navigationButton);
});
}
})
});
"exclusive"
, it should be an object. – jcubic Jul 4 at 21:02