Vinoth Rajendran
Vinoth Rajendran

Reputation: 1211

bootstrap multiselect dropdown option disable

I am using bootstrap multiselect select and angular ng-options for loading options.

<select on-change-evt="#view-user"
                            ng-model="userCtrl.columnAllowed"
                            ng-options="item.displayName for item in userCtrl.userGridColumns track by item.id"
                            disable="item"
                            class="form-control btn btn-sm"
                            class="input-small" enable-filter="true" placeholder="Search column"
                            multiple="multiple" selected-text="Columns" number-displayed="2">
                          </select>

I need to have some minimum options to be selected as default which has to be disabled too.

I have tried ng-options="item.displayName disable when item.disabled == true for item in userCtrl.userGridColumns track by item.id" this but won't work as expected.

Upvotes: 0

Views: 3062

Answers (1)

Suresh B
Suresh B

Reputation: 1652

**

Edited Version

**

var app = angular.module('app', [ ]);

app.controller('MainCtrl', function($scope) {
  
    $scope.cars = [{id:1, name: 'Audi', isDisabled: false}, {id:2, name: 'BMW', isDisabled: true}, {id:3, name: 'Honda', isDisabled: true}, {id:4, name: 'Mercedes-Benz', isDisabled: false}];
   
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
 

<div class="form-group">
                  <label>Select Multiple Specific options</label>
                  <select multiple="" class="form-control"  >
                    <option ng-repeat="item in cars" ng-disabled="{{item.isDisabled}}">{{item.name}}</option>
                    
                  </select>
                </div>
  </body>

Upvotes: 1

Related Questions