在angularjs中禁用带有ng-options的选择框

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>

我尝试使用 ng-disabled、在 ng-options 中禁用、ng-readonly，但这些都不适合我。那么实现这一目标的正确方法是什么？

ng-禁用示例：

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

更新： 我尝试了建议的解决方法之一：

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

但我可以切换到选择框内的空条目并将选择框的值设置为未定义。

Answer 1

您的代码 sn-p 还不清楚。但我可以使用 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 2

我猜你的逻辑是错误的，

如果你不想改变选择框中的内容，那么它就不会是一个选择元素，只需使用一个输入并为其分配一个模型，然后改变一些东西，改变它的值。

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

Answer 3

原来这是一个离子框架项目选择问题。

我发现这个问题可以解决我的问题： 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 4

你不能按照你想要的方式做，但是在之前提出的问题中有一些解决方法，检查它们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={};
})

希望对你有帮助，祝你好运