javascript - Angular Directive(指令)中的单选按钮不起作用

Question

我正在尝试制作一个 Angular Directive(指令)，该指令接收一个带有问题和多个答案的对象。然后它应该将答案显示为单选按钮，以便用户可以选择一个进行投票，然后可以将其发送回服务器。

在我的版本中，ng-model/scope 变量没有更新。

<div>
  <h3> {{poll.question}}</h3>
  <div class="list-group">
<form>
  <label ng-repeat="option in poll.options" for="{{option.optionName}}">{{option.optionName}}
    <input type="radio" id="{{option.optionName}}" ng-model="selectedOption" ng-value="option.optionName" name="option"/>
  </label>
</form>
 </div>
   <button ng-class="btn" ng-click="sendOption()">Send Vote</button>
  <p>the option you selected is: {{selectedOption}}</p>

  .directive('voter', function () {
return {
  templateUrl: 'app/voter/voter.html',
  restrict: 'EA',
  scope:{
    poll:'='
  },
  controller:function($scope,$http,Auth){
      $scope.selectedOption = 'no option selected';
      $scope.sendOption = function(){console.log($scope.selectedOption);};


  },
  link: function (scope, element, attrs) {
  }
};
})

它显示了投票答案的选项但 $scope.selectedOption 没有改变？我以前没有在 Angular 上使用过单选按钮，所以可能错过了一些明显的东西。

感谢您的帮助

Answer 1

问题是您在 ng-repeat 中使用了 ng-model。当您使用 ng-repeat 时，转发器中的每个项目都会创建自己的范围。当您单击单选按钮时，您会在这个新创建的范围上更新 selectedOption ...而不是指令上的范围。这就是您段落中的绑定(bind)未更新的原因。

您可以通过使用对象 (vote) 来保存投票结果来快速解决此问题:

<input type="radio" id="{{option.optionName}}" ng-model="vote.result" ng-value="option.optionName" />
...
<p>the option you selected is: {{vote.result}}</p>
...
controller:function($scope) {
  $scope.vote = {result: null}
  $scope.sendOption = function(){console.log($scope.vote.result);};
}

查看此 plunker .

编辑: 我修复了一个小错误。它通过未定义访问投票。我的答案现在使用点而不是方括号。 Plunker 也已更新。

更多信息见

• Binding using ng-model inside ng-repeat in angularjs