單選按鈕angularjs的數據綁定

Question

我試圖用單選按鈕制作表格。 我使用角度，我想獲取選中的單選按鈕的值。 我嘗試了ng-model，但這沒有用。

碼：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active" style="width: 100%">
    <input ng-model="typeOfFood" type="radio" checked="checked" ng-value="'recomandation'" /> Recomandations
  </label>
  <label class="btn btn-default" style="width: 100%">
    <input ng-model="typeOfFood" type="radio" ng-value="'apperitive'"/> Apperitives
  </label>
  <label class="btn btn-default" style="width: 100%">
    <input ng-model="typeOfFood" type="radio" ng-value="'main'"/> Mains
  </label>
  <label class="btn btn-default" style="width: 100%">
    <input ng-model="typeOfFood" type="radio" id="desserts" ng-value="'dessert'"/> Desserts
  </label>
</div>

控制器：

angular.module('demoApp')
  .controller('MenuCtrl', function ($scope) {
    $scope.typeOfFood;

    $scope.option = function() {
      console.log($scope.typeOfFood);
    }
  });

我收到了控制器中未定義的變量“ typeOfFood”。 如何解決此問題？

謝謝。

Answer 1

您有幾個錯誤：

您正在以錯誤的方式初始化角度主模塊，請使用以下方法：

angular.module('demoApp',[])

沒有數組，您將嘗試查找demoApp而不是創建新實例。

另外，您不使用ng-controller和ng-app指令。

如果要使用options函數，請使用ng-click指令調用它：

 <label class="btn btn-default" style="width: 100%">
      <input ng-click="option()" ng-model="typeOfFood" type="radio" id="desserts" ng-value="'dessert'" /> Desserts
    </label>

Codepen： http ：//codepen.io/armellajuan/pen/QyKPpO

也許這本書會對您有所幫助： http : //www.angularjsbook.com/angular-basics/chapters/introduction/