<!DOCTYPE html>
<html>
<head>
<script data-require="angular-route@*" data-semver="1.6.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<pre>{{ selected | json }}</pre>
<select class="form-control" ng-model="selected" ng-options="option.name as option.name disable when option.disable for option in options"></select>
<button ng-click="blah()">Flip Boolean</button>
</body>
</html>
// Code goes here
var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$filter){
$scope.selected = "h";
$scope.options = [
{
name: "a",
disable: false
}, {
name: "b",
disable: false
}, {
name: "c",
disable: false
}, {
name: "d",
disable: false
}, {
name: "e",
disable: true
}, {
name: "f",
disable: true
}, {
name: "g",
disable: true
}, {
name: "h",
disable: true
}, {
name: "i",
disable: false
}, {
name: "j",
disable: false
}];
$scope.blah = function() {
for(var i = 0; i < $scope.options.length;i++) {
if($scope.options[i].name === $scope.selected) {
$scope.options[i].disable = !$scope.options[i].disable;
}
}
}
});
/* Styles go here */