Only one option can be selected in a list of selects

Only one option can be selected in a list of selects

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<h1>Only one option can be selected in a list of selects</h1>

<div ng-controller="MyCtrl">
    <table>
        <tr>
            <th ng-repeat="item in dropdowns">
                <select ng-change="changed($index)" ng-model="item.value">
                    <option value="0">Ignore</option>
                    <option value="1">Value 1</option>
                    <option value="2">Value 2</option>
                    <option value="3">Value 3</option>
                </select>
            </th>
        </tr>
    </table>
</div>

JavaScript

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    
    $scope.dropdowns = [{value: 0}, {value: 0}, {value: 0}, {value: 0}, {value: 0}, {value: 0}, {value: 0}, {value: 0}, {value: 0}];
    
    $scope.changed = function(index){
        for(var i=0;i<$scope.dropdowns.length;i++){
            if(i !== index){
                if($scope.dropdowns[i].value === $scope.dropdowns[index].value){
                       $scope.dropdowns[i].value = 0;
                }   
            }
        }
    }
    
}