I have this widget that's to be used to select computers for order. What
I'm attempting to do is to disable or hide other options, once (1) option
is selected. Additionally, if the item selected is UN-selected, I want it
to go back to the starting state.
So, here we have the initial state of the options:
[image: image]
Here is what we get when on is selected:
[image: image]
And here is what I'm trying to avoid, more than one selection:
[image: image]
How can I hide and/or disable the additional options once one (1) option is
selected?
So far I believe that this bit of code in the HTML part of the widget is
where I should make a change.
<!-- toggle -->
<div class="inline" ng-if="::showIncludeToggle">
<div class="input-switch inline v-middle m-l"
ng-click="$event.stopPropagation()" uib-tooltip="{{item.included ?
'${Included}' : '${https://some-instance.service-now.com}'}}"
tooltip-placement="top" tooltip-append-to-body="true" role="none">
<input type="checkbox"
ng-model="item.included"
tabindex="0"
aria-label="${Included}"
id="enable_switch_"
ng-disabled="disableME" />
<label class="switch" for="enable_switch_"
ng-click="toggleItemState(item)"></label>
</div>
</div>
<!-- toggle end -->
I've added the *ng-disabled="disableME**" *in the belief that I'll need to
somehow gather the states of all my inputs, loop through the input states,
and set all inputs to *ng-disabled="true"* that are not *"checked"*?
An educated guess is that I should put together a function in the client
portion of the widget to do this. i.e. ...
$scope.disableME = "false";
$scope.lockDownInput = function() {
$scope.includedItems.forEach(function (item) {
// I know it's not item.isChecked, this is an example
if(item.isChecked == false){
// Set to true, etc...
$scope.disableMe="true";
}
});
}
Or modify the toggleItemState() function in some way to add this
functionality:
$scope.toggleItemState = function(item) {
if(item.included) {
$scope.totalIncluded--;
angular.element('#item_details_' + item.sys_id).find('a[href], area[href],
input:not([disabled]), select:not([disabled]), textarea:not([disabled]),
button:not([disabled]), iframe, object, embed, *[tabindex],
*[contenteditable]').attr('tabindex', -1);
}
else {
$scope.totalIncluded++;
angular.element('#item_details_' + item.sys_id).find('a[href], area[href],
input:not([disabled]), select:not([disabled]), textarea:not([disabled]),
button:not([disabled]), iframe, object, embed, *[tabindex],
*[contenteditable]').removeAttr('tabindex');
}
}
Any advice would be appreciated. I'm a noob with Angular.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/f685c45e-51e6-4a6c-8671-9ca346bb540b%40googlegroups.com.
