Disable selectbox with ng-options in angularjs

Question

Hello how can I disable a select box, so that a user can only see the actual value of the select box and can't change the content inside. It's for an ionic framework mobile application.

My select box is looking like this one here:

<select ng-class="nightMode"
        ng-options="option as option.label for option in item.Options track by option.id"
        ng-change="item.Call(item.SettingKey,item.Checked.id)"
        ng-model="item.Checked">
</select>

I tried with ng-disabled, disable inside the ng-options, ng-readonly but none of these worked for me. So what is the correct way to achieve this?

ng-disable example:

<select ng-class="nightMode"
        ng-options="option as option.label for option in item.Options track by option.id"
        ng-disabled="true"
        ng-change="item.Call(item.SettingKey,item.Checked.id)"
        ng-model="item.Checked">
</select>

Update: I tried one of the workarounds like suggested:

<select ng-class="nightMode"
        ng-change="item.Call(item.SettingKey,item.Checked.id)"
        ng-model="item.Checked">
  <option ng-repeat="option in item.Options" value="option.id" ng-disabled="true" ng-selected="item.Checked.id==option.id">{{option.label}}</option>
</select>

But I can switch to a empty entry inside the select box and set the value of the selectbox to undefined.

it may be typeo cz op mentioned ` ng-disable, disable inside the ng-options` @TjaartvanderWalt — Anik Islam Abhi, Dec 01 '15 at 08:53
you wanna to disable options or selectbox it self ? @Kingalione — Anik Islam Abhi, Dec 01 '15 at 08:55
the selectbox itself. the user should only see the current value in it and has no chance to change the value — Kingalione, Dec 01 '15 at 08:56
ng-disabled should disable your selectbox but it won't make data selected until you assign value to it's model @Kingalione — Anik Islam Abhi, Dec 01 '15 at 08:57
Well with ng-disabled I can still change the value of the selectbox. — Kingalione, Dec 01 '15 at 08:59

QuokMoon · Answer 1 · 2015-12-01T09:19:06.317

0

Your code snippet not clear yet. But i can disable this select using disabled="true" .

Check out my working
http://plnkr.co/edit/xDefIzZ3YleYcyAmQYHj?p=preview

Here are better code snippet editor :

http://plnkr.co/

http://jsfiddle.net/

edited Dec 01 '15 at 09:19

answered Dec 01 '15 at 09:13

QuokMoon

4,387
4
26
50

plnkr and jsfiddle have no content inside – Kingalione Dec 01 '15 at 09:17
Yes .. i can not post plnkr link in href tag . Check my edited answer – QuokMoon Dec 01 '15 at 09:19
ok I see its woking on the normal browser. Maybe it's not working for me because I use this code in a ionic framework mobile application? Somehow all these technics to disable a select box on browser are not working on the iOS simulator – Kingalione Dec 01 '15 at 09:26
Yes it is the item-select class from ionic wich brings all the problems with. – Kingalione Dec 01 '15 at 09:37
@Kingalione next time please indicate you are using "ionic framework mobile application" or any other framework in your question so that everyone is aware of this. – Tjaart van der Walt Dec 01 '15 at 09:41

score 0 · Answer 2 · answered Dec 01 '15 at 09:26

I guess your logic is wrong,

If you don't want to change content in selectbox, then it's not going to be a select element, just use an input and assign a model to it, then something changed, change the value of it.

<input type="text" name="selectedId" ng-model="selectedId" />

Other Implementation:

If you want to open select and don't able to select them, then add your dynamic data to

var datas = [
{
"value" : "foo",
"id" : "0111",
"selectable": false
},
{
"value" : "foo",
"id" : "0111",
"selectable": true
}
];

Then use it on option element;

<option ng-repeat="option in item.Options" value="option.id" ng-disabled="true" ng-disabled="item.selectable">{{option.label}}</option>

score 0 · Accepted Answer · answered Dec 01 '15 at 09:57

Well it turned out that this was a ionic-framework item-select problem.

I found this issue to solve my problem: https://github.com/driftyco/ionic/issues/1549

Like suggested there I end up adding a class to my select box which looks like this:

.style-disabled {
  pointer-events: none;
}

And my select box is now looking like this:

<select class="style-disabled"
        ng-class="nightMode"
        ng-disabled="someCondition"
        ng-options="option as option.label for option in item.Options track by option.id"
        ng-change="item.Call(item.SettingKey,item.Checked.id)"
        ng-model="item.Checked">
</select>

score -2 · Answer 4 · edited May 23 '17 at 12:17

-2

You can't do it the way you want, but there are some work around in previously asked question, check them 1 , 2

<div ng-app="myapp">
<form ng-controller="ctrl">
    <select id="t1" ng-model="curval">
        <option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
    </select>
    <button ng-click="disabled[curval]=true">disable</button>
</form>

angular.module('myapp',[]).controller("ctrl", function($scope){
  $scope.options=['test1','test2','test3','test4','test5'];
  $scope.disabled={};
})

I hope that helps, good luck

edited May 23 '17 at 12:17

Community

1
1

answered Dec 01 '15 at 08:54

user2120121

665
1
6
15

I tried the second example but its still not like how I want to be. I've updated my code above – Kingalione Dec 01 '15 at 09:11

Disable selectbox with ng-options in angularjs

4 Answers4