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

Question

I'm trying to make an angular directive that takes in an object with a question and a number of answers. Then it should show the answers as radio buttons so the user can select one to vote for, then it could be sent back to the server.

On my version the ng-model/scope variable isn't updating.

<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) {
  }
};
})

It displays the options for the poll answers but $scope.selectedOption doesn't change? I've not used radio buttons on Angular before so probably missed something obvious.

Thank for any help

Answer 1

You can use this method to keep track of the selectedOption assuming that you only have one selectedOption at a time. It initializes the selectedOption variable on the form and then each time you click an input, it tells the parent form to change the variable to the selected index.

<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

The problem is that you are using ng-model inside ng-repeat . When you use ng-repeat each item in the repeater has its own scope created. When you click on a radio button, you update selectedOption on this newly created scope ... not the scope on the directive. This is why the binding in your paragraph isn't being updated.

You can quickly fix this by using an object ( vote ) to hold the voting result:

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

See this plunker .

Edit: I fixed a small bug. It was accessing vote via undefined. Instead of square brackets, my answer now uses a dot. Plunker has also been updated.

For more information see

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