Angular Material单选按钮模型不更新

Question

我正在使用带有“ng-repeat”的Angular材料单选按钮组，但我无论如何都无法使“ng-model”随选择更新。这是我的当前实现，但我也尝试过“ng-model =“$parent.effectSelected””

在代码的后面部分，当用户单击按钮时，我有一个函数，并且我使用所选的值来评估下一步，但它总是记录为“one”，这是我最初设置的。

我的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);
   }

- tester123

Answer 1

好的，问题在于您没有将单选按钮封装在一个对象中。为了使您的代码工作，需要像这样进行操作:

我的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

- Javierif

Answer 2

我为你准备了一个JS Fiddle。

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

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

应该是

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

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

- phix