来自单选按钮angularjs的数据绑定

Data binding from radio buttons angularjs

本文关键字：数据绑定 angularjs 单选按钮      更新时间：2023-09-26

我试着用单选按钮制作一个表单。我使用角度，我想得到选中单选按钮的值。我试过ng模型，但没用。

代码：

<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"。如何解决此问题？

谢谢。

您有几个错误：

你正在以一种糟糕的方式初始化角度主模块，使用这个：

angular.module('demoApp',[])

如果没有数组，您将尝试查找demoApp，而不是创建新实例。

此外，您不能使用ng控制器和ng应用程序指令。

如果您想使用选项函数，请使用ng调用它，点击指令：

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

代码笔：http://codepen.io/armellajuan/pen/QyKPpO

也许这本书会在以下细节方面对您有所帮助：http://www.angularjsbook.com/angular-basics/chapters/introduction/

相关文章：