我正在尝试制作一个 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 上使用过单选按钮,所以可能错过了一些明显的东西。
感谢您的帮助
最佳答案
问题是您在 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 也已更新。
更多信息请参见
关于javascript - Angular Directive(指令)中的单选按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33585293/