当来自数据库的 item.value 为 4 时禁用选择选项，但当 UI 中的选定 item.value 为 4 时，不

Question

下面的代码显示了状态new=1, old=2, declined=3 and expired=4的下拉列表。从表中获取status时，所有状态都显示在下拉列表中。

要求是从数据库中disable所有expired产品的dropdown，但在从 UI 中选择将状态更改为other statuses expired时，不应禁用expired。

代码如下。

<select class="uk-width-1-1 uk-form-small" 
          ng-options="item.Key as item.Value for item in ctrl.currentItem.ProductStatuses" 
          ng-model="product.Status" ng-disabled="">
    New
</select>

Answer 1

您

所需要的只是配置 ng-options 的微语法以包含 disabled 属性，如下所示。

<select class="uk-width-1-1 uk-form-small" ng-options="item.Key as item.Value 
                 disable when item.disabled for item in ctrl.currentItem.ProductStatuses" 
                ng-model="product.Status">
    New
</select>

如以下示例所示。最初，当控制器初始化时，数组中没有disabled属性，但是当用户单击按钮时，它会模拟服务器调用，其中数组包含一个属性设置为 true 的对象disabled ，因此输入已被禁用。

请检查以下示例，并让我知道这是否解决了您的问题。

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
	this.currentItem = {
  	ProductStatuses: [
    {Key: 1, Value: 1},
    {Key: 2, Value: 2},
    {Key: 3, Value: 3},
    {Key: 4, Value: 4}
    ]
  }
  this.serverCall = function() {
  	console.log("serverCall");
  	this.currentItem = {
      ProductStatuses: [
        {Key: 1, Value: 1},
        {Key: 2, Value: 2},
        {Key: 3, Value: 3},
        {Key: 4, Value: 4, disabled: true}
      ]
  	}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController as ctrl' ng-app="myApp">
  <select class="uk-width-1-1 uk-form-small" ng-options="item.Key as item.Value disable when item.disabled for item in ctrl.currentItem.ProductStatuses" ng-model="product.Status">
    New
  </select>
  <button ng-click="ctrl.serverCall()">server call</button>
</div>

Answer 2

试试这段代码。该代码将禁用下拉列表的dropdown，但不会禁用下拉列表的option。在select中添加ng-disabled="ctrl.isDisabledProduct"，如下所示。

<select class="uk-width-1-1 uk-form-small" 
     ng-options="item.Key as item.Value for item in ctrl.currentItem.ProductStatuses" 
     ng-model="product.Status" ng-disabled="ctrl.isDisabledProduct">
   New
</select>

在ng-controller输入以下代码，同时从数据库中获取products。假设ctrl.currentItem.Products包含产品列表。

ctrl.isDisabledProduct = false;
for (var product of ctrl.currentItem.Products) {
   ctrl.isDisabledProduct = product.Status == 4;
 }