【AngularJS】プルダウンの一部を動的に選択不可能にする

メモ。

AngularJSではselectタグにng-optionsを指定するとIterableオブジェクトの要素からなるプルダウンを作成できますが、その一部をdisable状態にすることができます。

HTML

<div ng-app="myApp">
  <div ng-controller="NgOptionDisableCtrl">
    <select ng-model="num" ng-options='number disable when number === 3 for number in numbers'></select>
  </div>
</div>

JS

let mod = angular.module('myApp',[]);
mod.controller('NgOptionDisableCtrl', ['$scope', function($scope){
  $scope.num = 1;
  $scope.numbers = [1,2,3,4,5];
}]);

codepen.io

ng-optionsに[変数] disable when [条件式] for ...と指定することで、条件をみたす場合にdisable状態になります。

上記コードでは、プルダウンの3を選択できないようになっています。

<select ng-model="num" ng-options='number disable when number === 3 for number in numbers'></select>