Debuginfo

思考とアウトプット

AnuglarJSでRadioボタンとSelectを連動させる方法

Selectの最初のオプションが空欄になってしまったりしてハマりましたが、ポイントはng-changeイベントでSelectの初期値を設定してやることです。

<label class="photoCategory" for="breakfirst">
    <input id="breakfirst" type="radio" name="category" ng-model="category" value="breakfirst" ng-change="categoryType=selections.breakfirst[1]"> Breakfirst
</label>
  
<label class="photoCategory" for="lunch">
    <input id="lunch" type="radio" name="category" ng-model="category" value="lunch" ng-change="categoryType=selections.lunch[7]"> Lunch
</label>

<label class="photoCategory" for="dinner">
    <input id="dinner" type="radio" name="category" ng-model="category"  value="dinner" ng-change="categoryType=selections.dinner[0]"> Dinner
</label>
      
<br>

<select ng-model="categoryType" ng-options="type for type in selections[category]" class="form-control"></select>

がViewでコントローラー側で、

var food = [ 'beef', 'bread',,, ];
$scope.selections = {breakfirst: food, lunch: food, dinner: food};