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

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

的问题是，你正在使用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。

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

欲了解更多信息，请参阅

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

Answer 2

您可以使用此方法来跟踪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>