Отключить selectbox с ng-опциями в angularjs

Question

Привет, как я могу отключить поле выбора, чтобы пользователь мог видеть только фактическое значение поля выбора и не может изменять содержимое внутри. Это для мобильного приложения с ионной картой.

Мой выбор окно выглядит как этот здесь:

<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> 

Я попытался с нг-инвалидов, отключить внутри нг-опций, нг-только для чтения, но ни один из них не работает для меня. Итак, каков правильный способ достичь этого?

нг-выключение Пример:

<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: Я попробовал один из обходных путей, как предложил:

<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> 

Но я могу переключиться на пустой записи в поле выбора и установите значение selectbox для undefined.

Answer 1

Хорошо, оказалось, что это была проблема выбора элемента с ионной структурой.

Я нашел этот вопрос, чтобы решить мою проблему: https://github.com/driftyco/ionic/issues/1549

Как предложил там я в конечном итоге добавить класс к моему полю выбора, который выглядит следующим образом:

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

И мой выбор коробка в настоящее время выглядит следующим образом:

<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> 

Answer 2

Вы не можете сделать это так, как вы хотите, но есть некоторые работы вокруг в ранее заданный вопрос, проверить их 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={}; 
}) 

Я надеюсь, что помогает, удачи

Answer 3

Ваш фрагмент кода еще не ясен. Но я могу отключить этот выбор, используя 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/ 

Answer 4

Я предполагаю, что ваша логика не так,

Если вы не хотите, чтобы изменить содержание в переключателе, то это не будет выбрать элемент, просто используйте вход и назначить модель для него , то что-то изменилось, измените его значение.

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

Другая Реализация:

Если вы хотите, чтобы открыть выбор и не в состоянии выбрать их, затем добавить динамические данные

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

Затем используйте его на опцию элементе;

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