如何使用角度限制下拉列表仅选择一个值

How to restrict dropdown to choose only one value using angular?

本文关键字：一个 选择 何使用 下拉列表      更新时间：2023-09-26

我有一个下拉列表，其中的选项来自使用 ng-repeat 的数组。它正在正常下拉工作。但我想要一种不同的方式。如果选择一个选项，则应在其他下拉列表中禁用该选项。我们可以在角度中做到这一点吗？

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="address in addresses">
        Billing State:
        <select
            ng-model="address.state"
            ng-options="state.lookupCode as state.description for state in lov_state"></select>
        <tt>State selected: {{address.state}}</tt>
    </div>
</div>

控制器代码： 

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
    $scope.addresses = [
        {'state': 'AL'},
        {'state': 'CA'},
        {'state': 'FL'}
    ];
    $scope.lov_state = [
        {'lookupCode': 'AL', 'description': 'Alabama'},
        {'lookupCode': 'FL', 'description': 'Florida'},
        {'lookupCode': 'CA', 'description': 'California'},
        {'lookupCode': 'DE', 'description': 'Delaware'}
    ];
});

请帮助我做到这一点。这是jsfiddle链接。

https://jsfiddle.net/santhosh1a32/3vd7hyrq/

您可以使用ng-options it 本身中提供disable的选项，方法是在关键字之前的位置使用 disable when condition for。

<div ng-repeat="address in addresses">
  Billing State:
  <select ng-model="address.state" ng-change="checkSelected(address.state)" 
    ng-options="state.lookupCode as state.description disable when (address.state != state.lookupCode && state.selected) for state in lov_state">
  </select>
  <tt>State selected: {{address.state}}</tt>
</div>

在这里演示

相关文章：