如何限制下拉列表使用角度僅選擇一個值？

Question

我有下拉列表，其中哪些選項來自使用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/

Answer 1

您可以通過在關鍵字for之前的disable when condition中使用disable when condition來使用ng-options自身提供的disable選項。

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

在這里演示