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-disable示例：

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

但我可以切换到选择框内的空条目，并将selectbox的值设置为undefined。

Answer 1

您的代码段尚不清楚。但我可以使用 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

我猜你的逻辑错了，

如果您不想更改selectbox中的内容，那么它不会成为一个select元素，只需使用输入并为其指定模型，然后更改某些内容，更改值它

<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={};
})

我希望有所帮助，祝你好运

使用angularjs中的ng-options禁用selectbox

4 个答案: