根据 ng-model 和 ng-value 在负载上检查错误的无线电输入答案

【问题标题】：Wrong radio input checked on load based on ng-model and ng-value根据 ng-model 和 ng-value 在负载上检查错误的无线电输入
【发布时间】：2018-07-25 17:29:37
【问题描述】：

我有一些radio inputs DEMO on PLNKR 的基本表单示例：

<form class="some-inputs">
    <div ng-repeat="da in data">
      <span>{{$index}}: {{da}}</span>
      <label>
        <input type="radio" id="lock-{{$index}}"
               name="lock-choice-{{$index}}"
               ng-model="mdl['account-{{$index}}']['blocked']"
               ng-value="da.blocked">
        <span>blocked</span>
      </label>
      <label>
        <input type="radio" id="unrealized-{{$index}}"
               name="lock-choice-{{$index}}"
               ng-model="mdl['account-{{$index}}']['unrealized']"
               ng-value="da.unrealized">
        <span>not blocked</span>
      </label>
    </div>
</form>

如您所见，我没有使用 ng-checked，只使用 ng-model 和 ng-value。还有一些对象打印了属性，以供比较。

问题是，为什么在每个示例中，都会检查第二个单选按钮，即使它的值为 false - 因此应该检查第一个真实的单选按钮 - ？

当我从输入中删除 ng-value 属性时，不会检查任何单选，即使 ng-models 中的属性已经具有可以实现它的值..

【问题讨论】：

ng-value 指令采用 AngularJS 表达式。见Why mixing interpolation and expressions is bad practice
插值指令{{ }} 将布尔值false 转换为字符串"false"。在 JavaScript 中，字符串 "false" 是 truthy。
好的，去掉插值，现在默认没有收音机被检查。甚至稍微修改了代码并开始使用另一个对象作为模型源。当点击某个电台时，其他电台也会以一种奇怪的方式被点击。还是不知道怎么回事……

标签： javascript angularjs forms object

【解决方案1】：

当对对象执行ng-repeat 时，使用(key, value) 作为迭代器：

̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶d̶a̶ ̶i̶n̶ ̶d̶a̶t̶a̶"̶>̶
<div ng-repeat="(key,da) in data">

它使 HTML 更清晰。

The DEMO

angular.module('app', [])
.controller('ctrl', function($scope) {
  $scope.data = {
    "account-0":{
      "blocked":true,
    },
    "account-1":{
      "blocked":false,
    },
    "account-2":{
      "blocked":false,
    },
    "account-3":{
      "blocked":true,
    }
  };
  $scope.mdl = {};
  angular.forEach($scope.data, (value, key)=> {
    $scope.mdl[key] = {choice: value.blocked?'blocked':'not blocked'};
  });
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <form name="form1">
    <div ng-repeat="(key, da) in data">
      <span>{{key}}</span>
      <label>
        <input type="radio" id="{{key}}-blocked"
               name="block-choice-{{key}}"
               ng-model="mdl[key].choice"
               ng-value="'blocked'">
        <span>blocked</span>
      </label>
      <label>
        <input type="radio" id="{{key}}-not-blocked"
               name="block-choice-{{key}}" 
               ng-model="mdl[key].choice"
               ng-value="'not blocked'">
        <span>not blocked</span>
      </label>
      <label>
        <input type="radio" id="{{key}}-undecided"
               name="block-choice-{{key}}" 
               ng-model="mdl[key].choice"
               ng-value="'undecided'">
        <span>undecided</span>
      </label>
    </div>
    <hr>
    <div ng-repeat="(k,v) in mdl">
    {{k}} {{v}}
    </div>
  </form>
</body>

【讨论】：

谢谢，现在终于可以使用了！我的问题是使用 ng-model="mdl['account-{{$index}}']['unrealized']" 而不是更简单的 ng-model="mdl[key].choice" - 这个案例可能是在内部使用插值ng 模型。