如何在AngularJS中用Scope变量填充单选按钮并收集变更

你的问题主要出在ng-value的设置错误和ng-repeat中模型共享这两个点上，另外还要注意x.employed的类型匹配问题，我来一步步帮你解决：

核心问题分析 #

1. 你原来的代码里两个单选按钮的ng-value都设为x.employed，这意味着不管选Yes还是No，绑定的模型都会被赋值为初始的x.employed值，完全无法区分用户选择的是哪个选项。
2. 在ng-repeat中使用ng-model="new.employed"会导致所有循环项共享同一个模型，选择其中一个单选按钮会让所有项都同步选中，这显然不符合需求。
3. ng-checked确实不能和ng-model一起使用，因为ng-model会自动管理单选按钮的选中状态，手动加ng-checked会触发冲突。

解决方案 #

根据你需要保留原数据还是收集新数据，分两种情况处理：

情况1：直接修改原数据（绑定到x.employed）

如果允许直接修改FormList中的x.employed值，我们可以直接把单选按钮绑定到它，同时为Yes/No设置正确的ng-value（匹配x.employed的字符串类型）：

<div class="container" ng-repeat="x in FormList">
  <div class="form-group">
    <!-- Yes按钮绑定字符串'true' -->
    <input type="radio" ng-value="'true'" ng-model="x.employed" /> Yes &nbsp;
    <!-- No按钮绑定字符串'false' -->
    <input type="radio" ng-value="'false'" ng-model="x.employed" /> No
  </div>
</div>

这样做的好处是：

• 初始状态下，x.employed为'true'时自动选中Yes，'false'时选中No，null时两个都不选
• 用户修改后，x.employed会自动更新为对应的字符串值，直接完成数据收集

情况2：保留原数据，收集修改到新对象

如果不想改动原FormList，可以在控制器里创建一个对应的newList数组来存储修改后的值：

第一步：在控制器中初始化新数组

// 复制原数据的初始值到newList
$scope.newList = $scope.FormList.map(function(item) {
  return {
    employed: item.employed
  };
});

第二步：模板中绑定到新数组

<div class="container" ng-repeat="x in FormList track by $index">
  <div class="form-group">
    <input type="radio" ng-value="'true'" ng-model="newList[$index].employed" /> Yes &nbsp;
    <input type="radio" ng-value="'false'" ng-model="newList[$index].employed" /> No
  </div>
</div>

这里用$index来关联FormList和newList的对应项，避免模型共享问题，同时保留原数据不变。

可选：转成布尔值处理

如果你希望把employed的值存为布尔类型（true/false）而不是字符串，可以先在控制器里预处理原数据：

$scope.FormList.forEach(function(item) {
  if (item.employed === 'true') {
    item.employed = true;
  } else if (item.employed === 'false') {
    item.employed = false;
  }
  // null值保持不变
});

然后模板中的ng-value改成布尔值即可：

<input type="radio" ng-value="true" ng-model="x.employed" /> Yes &nbsp;
<input type="radio" ng-value="false" ng-model="x.employed" /> No

处理null的默认选中（可选） #

如果希望当x.employed为null时默认选中某个选项（比如No），可以在控制器预处理时添加逻辑：

$scope.FormList.forEach(function(item) {
  if (item.employed === null) {
    item.employed = 'false'; // 或者false，根据你使用的类型
  } else if (item.employed === 'true') {
    item.employed = true;
  } else if (item.employed === 'false') {
    item.employed = false;
  }
});

内容的提问来源于stack exchange，提问作者royG