角度材质单选按钮模型未更新

Angular Material Radio Button model not updating

本文关键字：模型 更新 单选按钮      更新时间：2023-09-26

我使用的是带有ng-repeat的Angular Material无线电组，但就我而言，我无法使用选择更新ng-model。这是我目前的实现方式，但我也尝试过ng-model="$parent.effectSelected"

在代码的后面，当用户单击按钮时，我有一个函数，我使用select的值来评估接下来的步骤，但它总是记录为"一"，这是我最初设置的。

我的HTML:

<md-radio-group ng-model="effectSelected" class="effect-radio-group">
  <md-radio-button class="effect-btn" ng-repeat="effect in effects" ng-value="effect.value">{{effect.name}}</md-radio-button>
</md-radio-group>
<md-button ng-click="checkSelection()">Evaluate</md-button>

我的控制器JS:

   $scope.effects = [{'name':'None', 'value': 'one'},{'name':'Maybe', 'value': 'two'},{'name':'Yes', 'value': 'three'}];
   $scope.effectSelected = $scope.effects[0].value;
   $scope.checkSelection = function () {
       console.log($scope.effectSelected);
   }

问题是因为u没有将无线电封装在对象中。要工作你的代码需要这样做：

我的HTML:

<md-radio-group ng-model="effectSelected.selected" class="effect-radio-group">
  <md-radio-button class="effect-btn" ng-repeat="effect in effects" ng-value="effect.value">{{effect.name}}</md-radio-button>
</md-radio-group>
<md-button ng-click="checkSelection()">Evaluate</md-button>

我的控制器JS:

   $scope.effects = [{'name':'None', 'value': 'one'},{'name':'Maybe', 'value': 'two'},{'name':'Yes', 'value': 'three'}];
   $scope.effectSelected = { selected:'one'}
   $scope.checkSelection() = function () {
       console.log($scope.effectSelected.selected);
   }

希望这对你有所帮助；D

我为您准备了一个JS Fiddle。

此外，我相信你有一个语法错误：

$scope.checkSelection() = function () {
       console.log($scope.effectSelected);
   }

应该是

$scope.checkSelection = function () {
       console.log($scope.effectSelected);
   }

https://jsfiddle.net/HB7LU/20182/

相关文章：