Hi Ramesh,
I think the best way to do this would be to use Angular events. The select box will broadcast an event to the rootscope and the other list widgets will have listeners to set a variable in their scope to true/false. Those variables will be linked to an ng-if expression in the top div in each widget, which will determine which widgets hide and show.
Something like this:
For your select box in the top widget use the following HTML
<select ng-options="option for option in listOfOptions"
ng-model="c.selectedItem"
ng-change="c.selectedItemChanged()">
</select>
In the client controller of that top widget
//Make sure you pass in $rootScope into the top function as shown below:
function($rootScope) {
/* widget controller */
var c = this;
c.listOfOptions = ['change_request','outage','both'];
//Default value for the select box
c.selectedItem = 'change_request';
//Generate event, passing the c.selected value to the widgets
c.selectedItemChanged = function(){
$rootScope.$broadcast('showListChange',c.selected);
}
}
and then in each of the list widgets we'll add an ng-if to the top div
<div ng-if="c.showWidget">
<!-- all of your other widget code here -->
</div>
In the client controller we'll handle the event listeners and setting the c.showWidget value. Let say the Change Request widget is supposed to show by default, then we would set the c.showWidget to true and then have the event listeners flip it to true and false depending on the c.selectedItem parameter in the event.
//Again pass in $rootScope
function($rootScope) {
/* widget controller */
var c = this;
//Show the widget by default, since we set "change_request" as the default value in the select box.
c.showWidget = true;
$rootScope.$on('showListChange',function(e,selectedItem){
if(selectedItem == 'change_request' || selectedItem == 'both'){
c.showWidget = true;
}else{
c.showWidget = false;
}
});
}
And then adjust the above script for the outage widget, setting c.showWidget initially to false, and changing the 'change_request' to 'outage' in the if statement.
Let me know if you have further questions, or need more help.
If my answer helped you, or is correct, please mark it as 'Helpful' or 'Correct'
Thanks,
Josh
