Darshana Ahalpara Darshana Ahalpara - 1 month ago 24
AngularJS Question

default select value based on drop down selection

code for Centre name drop down :



<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6">
<label>Centre Name<span class="required">*</span></label>
<div class="form-group">
<select data-selectpicker class="selectpicker" name="location"
data-ng-model="user.location_id" required>
<option value="">Select</option>
<option data-ng-repeat="location in locationValues"
value="{{location.location_id}}">{{location.name}}</option>
</select>
<span class="input-error-span" data-ng-show="editUser.$submitted || editUser.location.$touched || editUser.location.$dirty">
<span data-ng-show="editUser.location.$error.required">{{'REQUIRED_CENTRE' | translate}}</span>
</span>
</div>
</div>





My application having one drop down and one multi select box. Value of both fetched from same database.

Now problem is that user needs to select option from drop down first. this selection should be reflected on multi select which is on same page. means that whatever option selected from drop down box must be default selection in multi select which user can't change.

Please help me find out solution.

code for available centre multi select box:



<div class="col-lg-12 col-md-12 col-sm-4 col-xs-4" data-ng-if="user.role_id == '2'">
<label>Available In Centre<span class="required">*</span></label>
<div class="form-group">
<select name="location" class="form-control" multiple data-ng-multiple="true" data-ng-model="viewlocation" data-ng-options="obj.name for obj in locationValues" data-ng-init="obj.location_id = user.location_id" required>
</select>
<span class="input-error-span" data-ng-show="editUser.$submitted || editUser.location.$touched">
<span data-ng-show="editUser.location.$error.required">{{'REQUIRED_VIEWABLE_LOCATION' | translate}}</span>
</span>
</div>
</div>





now if user select option from drop down then that option should be selected in multi select box. and user can't change it until he/she changes option in drop down.

Answer

It's simply done using ng-disabled, check following fiddle

<div ng-app="exampleApp" ng-controller="appController">


     <select class="form-control" ng-model="disabledOptions">
        <option
            ng-repeat="fruit in example13data"
            ng-value="fruit.label"
        >{{fruit.label}}</option>
    </select>
    <br><br>

      <select class="form-control" multiple ng-model="disabledOptions1">
        <option
            ng-repeat="fruit in example13data"
            ng-disabled="disabledOptions.indexOf(fruit.label) !== -1"
            ng-value="fruit.label"
        >{{fruit.label}}</option>
    </select>

</div>

var myApp = angular.module('exampleApp',['angularjs-dropdown-multiselect']);

myApp.controller('appController', ['$scope', function($scope) {

        $scope.example13model = [];
        $scope.example13data = [
            {id: 1, label: "David"},
            {id: 2, label: "Jhon"},
            {id: 3, label: "Lisa"},
            {id: 4, label: "Nicole"},
            {id: 5, label: "Danny"}];

        $scope.disabledOptions = ['David'];
        $scope.disabledOptions1 = $scope.example13data[0];

}]);

https://jsfiddle.net/bmvtmzmm/140/

Comments