So I'm modifying this widget that uses Angular...

36 views

Skip to first unread message

Eric Gilmore

unread,

Oct 10, 2019, 12:31:36 PM10/10/19

to Angular and AngularJS discussion

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:

Here is what we get when on is selected:

And here is what I'm trying to avoid, more than one selection:

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.

Eric Gilmore

unread,

Oct 10, 2019, 5:49:58 PM10/10/19

to Angular and AngularJS discussion

OK, Let me simplify.

So in a sense, this is what I'm trying to do: AngularJS ng-disabled

Except, instead of having a select box that chooses which value causes the check-boxes to be disabled, the act of selecting one of the check-boxes disables the others.

code:

<html> <head> <title>Enable/Disable Checkbox on Dropdown Selection - AngularJS Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myController">  <select ng-model="item" ng-options="prod.name for prod in products" ng-change="updateCheckBox()" id="prod"> <option value="">-- Select --</option> </select> <p>  <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk1" /> Exchange Offer <br /> <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk2" /> Gift Voucher <br /> <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk3" /> Free UPS </p> </div> </body> <script> angular.module("myApp", []) .controller('myController', ['$scope', function ($scope) { // CREATE A "products" OBJECT (JSON). $scope.products = [ { 'name': 'HP' }, { 'name': 'IBM' }, { 'name': 'Lenovo' } ]; $scope.updateCheckBox = function () { // I HAVE SET CONDITION TO CHECK IF SELECTED PRODUCT IS "IBM", // THEN ENABLE ALL CHECKBOXES OR ELSE DISABLE ALL. if ($scope.item != null) { if ($scope.item.name == "IBM") $scope.enableMe = true; else $scope.enableMe = false; } else $scope.enableMe = false; }; } ]); </script> </html>