Question

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

在我的版本中，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

您可以使用此方法跟踪selectedOption，假设您一次只有一个selectedOption。它初始化表单上的selectedOption变量，然后每次单击输入时，它都会告诉父表单将变量更改为所选索引。

<form ng-init="selectedOption=0">
  <label ng-repeat="option in poll.options" for="{{option.optionName}}">{{option.optionName}}
    <input type="radio" id="{{option.optionName}}" ng-value="option.optionName" ng-click="$parent.selectedOption=$index" name="option"/>
  </label>
</form>

Answer 2

问题是您在ng-model内使用ng-repeat。当您使用ng-repeat时，转发器中的每个项目都会创建自己的范围。单击单选按钮时，将在此新创建的范围上更新selectedOption ...而不是指令的范围。这就是为什么段落中的绑定没有更新。

您可以使用对象（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。

编辑： 我修了一个小bug。它通过undefined访问投票。而不是方括号，我的答案现在使用一个点。 Plunker也已更新。

有关详细信息，请参阅

Binding using ng-model inside ng-repeat in angularjs

角度指令中的单选按钮不起作用

2 个答案: