AngularJS：与ngRepeat

Question

默认情况下，不会根据模型值检查单选按钮。

angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.decideVote ={
    vote: {
     yes: "Yes",
      no: "No",
     maybe: "Maybe"
	  //if i have more values here, i will get more radio buttons 
    } 
  }
  
   //uncomment for testing. 
   $scope.serverVoted= {
   vote: {yes:"Yes"}
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
	<form name="myForm">
		<p>Select Vote</p>
		<ul>
			<li ng-repeat="i in decideVote.vote">
				<label>
            {{i}}
					<input type="radio"  name="same"
                    ng-model="serverVoted.vote" ng-value="i" />
				</label>  
			</li>
		</ul>
	</form>
	<div>

如angularjs文档中所述，应该根据模型值自动检查无线电。我将在此处粘贴工作示例，但实际情况是这样的。

定义为radioButtonsFromJsonObj的组件，可以有许多元素作为radioButtonsFromJsonObj，并且可能使用不同的Json对象来填充单选按钮，但是对于特定的单选按钮组，模型是相同的。

但是当我再次打开页面并且模型具有正确的值时，仍不会按照模型检查单选按钮。

实际情况也类似于生成模板的组件，并且传递了绑定以动态获取每个元素的ngModel.ngModel设置正确，但是当尝试重新打开并从服务器读取数据时不会被检查自动。因此尝试在上面创建相同的场景。 内部组件具有初始化块和构造函数块，只需创建$ ctrl变量即可。

绑定如下

bindings: {
  model: '=ngModel'
}

在模板中具有ngRepeat，并且在每次迭代生成模板中都具有这样的内容。

 <input type="radio"  name="same"  ng-model="$ctrl.model" ng-value="i" />

并且主html可以包含许多元素。

<radioButtonsFromJsonObj ng-model="request.Voting1"> </radioButtonsFromJsonObj >
<radioButtonsFromJsonObj ng-model="request.Voting2"> </radioButtonsFromJsonObj >

Answer 1

serverVoted.vote是对象，因此请替换为ng-model =“ serverVoted.vote.yes”

angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.decideVote ={
    vote: {
     yes: "Yes",
      no: "No",
     maybe: "Maybe"
	  //if i have more values here, i will get more radio buttons 
    } 
  }
  
   //uncomment for testing. 
   $scope.serverVoted= {
   vote: {yes:"Yes"}
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
	<form name="myForm">
		<p>Select Vote</p>
		<ul>
			<li ng-repeat="i in decideVote.vote">
				<label>
            {{i}}
					<input type="radio"  name="same"  ng-model="serverVoted.vote.yes" ng-value="i" />
				</label>  
			</li>
		</ul>
	</form>
	<div>

Answer 2

  

错误

$scope.serverVoted= {
   vote: {yes:"Yes"}
}

相反：

 $scope.server = { vote: "Yes" };

演示

angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.decideVote ={
    vote: {
     yes: "Yes",
      no: "No",
     maybe: "Maybe"
	  //if i have more values here, i will get more radio buttons 
    } 
  }
  
   //uncomment for testing. 
   $scope.serverVoted= {vote: "Yes"};
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
	<form name="myForm">
		<p>Select Vote</p>
		<ul>
			<li ng-repeat="i in decideVote.vote">
				<label>
            {{i}}
					<input type="radio"  name="same"
                    ng-model="serverVoted.vote" ng-value="i" />
				</label>  
			</li>
		</ul>
	</form>
	<div>