asked on

AngularJs and HTML5

I have a requirement.

I have a switch ,if not selected I need to show a hardcoded multiselect options in my multiselect and allow users to select or deselect
if switch turned Yes, I need to show just one value as shown in the image.

Any thoughts?

My HTML code

<div ng-show="Report.currentReport.HasCompareActualVsTarget" class="col-xs-12 col-sm-6 col-md-4 col-lg-3 form-group">
                            <label class="control-label">Compare Actual Vs Target</label>
                            <input type="checkbox" name="CompareActualVsTarget" srf-switch on-label="Yes" off-label="No"
                                   ng-model="Report.currentReport.CompareActualVsTarget" />
                            <input type="hidden" name="CompareActualVsTarget" ng-value="Report.currentReport.CompareActualVsTarget" />
                        </div>

Open in new window

Julian Hansen

Do you mean like this?

<input type="radio" name="switch" ng-model="switch" value="1" /> Yes <input type="radio" name="switch" ng-model="switch" value="0" /> No
<select ng-model="selected" multiple>
  <option value="1" ng-show="switch==1">Compare</option>
  <option value="2" ng-show="switch==0">Actual</option>
  <option value="3" ng-show="switch==0">Target</option>
  <option value="4" ng-show="switch==0">Application</option>
</select>

Open in new window

Working sample here

Julian Hansen

Code using checkbox instead of radio

    <input type="checkbox" name="switch" ng-model="switch" value="1" /> Yes {{switch}}
    <select ng-model="selected" multiple>
      <option value="1" ng-show="switch==1">Compare</option>
      <option value="2" ng-show="switch==0">Actual</option>
      <option value="3" ng-show="switch==0">Target</option>
      <option value="4" ng-show="switch==0">Application</option>
    </select>

Open in new window

Subbu G

ASKER

thanks for your reply. actually I was looking for something like that.

see my html code:

<div ng-show="Report.currentReport.HasCompareActualVsTarget" id="milestone_dropdown" class="col-xs-6 col-sm-6 col-md-4 col-lg-3 form-group">
                            <label class="control-label">Milestone Types</label>
                            <multi-select input-model="Report.milestoneTypes"
                                          output-model="Report.selectedMilestoneTypes"
                                          button-label="milestoneTypesValue"
                                          item-label="milestoneTypesValue"
                                          tick-property="isChecked"
                                          max-labels="40"
                                          default-label="Select Milestone Types"
                                          helper-elements="filter"
                                          on-item-click="Report.multipleMilestoneTypesToggle(data)"></multi-select>
                            <input type="hidden" name="MultipleMilestoneTypesIds" ng-model="Report.multipleMilestoneTypesIds" ng-value="Report.multipleMilestoneTypesIds" ng-required="Report.currentReport.HasCompareActualVsTarget">

Open in new window

javascript

      allMilestoneTypes: [],
        milestoneTypes: [{ milestoneTypesId: 1, milestoneTypesValue: 'Actual Milestones' },
                         { milestoneTypesId: 2, milestoneTypesValue: 'Target Milestones' },
                         { milestoneTypesId: 3, milestoneTypesValue: 'Application Milestones' },
                         { milestoneTypesId: 4, milestoneTypesValue: 'Compare Actual Vs Target Milestones' },
         ],
        selectedMilestoneTypes: [],  // output
        milestoneTypesIdsArray: [],
        multipleMilestoneTypesIds: null,

        multipleMilestoneTypesToggle: function (milestoneTypes) {
            $scope.reportForm.$setDirty();
            var allMilestoneTypesForMultiSelect = $scope.Report.milestoneTypes;

            for (var i = 0; i < allMilestoneTypesForMultiSelect.length; i++) {
               if (allMilestoneTypesForMultiSelect[i].value === milestoneTypes.value) {
                   if (milestoneTypes.isChecked) {
                       $scope.Report.milestoneTypesIdsArray.push(milestoneTypes.value);
                    }
                   else {
                       var index = $scope.Report.milestoneTypesIdsArray.indexOf(milestoneTypes.value);
                        if (index > -1) {
                            $scope.Report.milestoneTypesIdsArray.splice(index, 1);
                       }
                   }
                   $scope.Report.milestoneTypesIdsArray = $scope.Report.milestoneTypesIdsArray.toString();
                    break;
                }
            }
        },
    };

Open in new window

I was able to populate the values but I want to filter it based on switch case.

if no , show three values in the multi select
if yes, hide the multi select but select 'compare' in the background and select the value

Subbu G

ASKER

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Subbu G

ASKER

I am sure how to do it. do you have a sample codes that I can take a look?

Julian Hansen

Can you post more of your code.

Subbu G

ASKER

thanks Julian. we can close this question now. But yeah I have all I need now with your help. You are always resourceful and solve my problems.
I will open a new one when I reach an interesting point in the later part of next week, because EE does not allow me to have an open question for long.

Julian Hansen

You are welcome Subbu, I find your questions really interesting.