在 angularjs 中使用 ng-options 禁用选择框

Question

你好，我怎样才能禁用select框，让用户只能看到select框的实际值，而不能更改里面的内容。它适用于离子框架移动应用程序。

我的 select 盒子在这里看起来像这个：

<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，但是 none 这些对我有用。那么实现这一目标的正确方法是什么？

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>

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

Answer 1

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

您的代码片段还不清楚。但是我可以使用 disabled="true" 来禁用这个 select 。

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

Here are better code snippet editor :

http://plnkr.co/

http://jsfiddle.net/

Answer 3

我猜你的逻辑是错误的，

如果您不想更改 selectbox 中的内容，则它不会成为 select 元素，只需使用输入并为其分配模型，然后进行一些更改, 改变它的值。

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

其他实现：

如果您想打开 select 但无法 select，然后将您的动态数据添加到

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 4

原来这是一个离子框架项目-select问题。

我发现这个问题可以解决我的问题： https://github.com/driftyco/ionic/issues/1549

就像那里的建议一样，我最终将 class 添加到我的 select 框中，如下所示：

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

我的 select 盒子现在看起来像这样：

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

在 angularjs 中使用 ng-options 禁用选择框

Disable selectbox with ng-options in angularjs

javascript

angularjs

ionic-framework

html-select