将复选框和收音机与多个 angular 模型组合

Question

我正在构建一个配置器工具，人们可以在其中配置自己的厨房，我需要一些逻辑方面的帮助。

假设人们可以 select 一个水槽：选中复选框后，会出现一个包含多个接收器（单选按钮）的列表。默认情况下，当复选框被选中时，第一个单选按钮也应该被选中。

我想在这里发生几件事：

1）选中复选框后，应出现单选按钮。默认情况下应选中第一个单选按钮，并且此 json 对象的值应存储在 formData.sink.

中 2) selected sink 的价格应该保存在prices[x].price.

3) 当复选框未选中时，prices[x].price 的值应设置为 0，formData.sink 对象应为空。

这是我的 HTML。在我的控制器中我还没有任何功能。

<tr class="tr-border-top">
  <td colspan="2"><input type="checkbox" ng-model="sink">Sink</td>
  <td>{{ prices[5].price  | currency:"€":0}},-</td>
</tr>
<tr ng-show="sink">
  <td colspan="3">
     <ul>
        <li ng-repeat="node in nodes | filter:{type:'sink'}">
           <label>
              <input type="radio" name="sink" class="form-control" ng-model="formData.sink" ng-value="node" ng-init="$index==0?(formData.sink=node):''">
              {{ node.title}}
           </label>
        </li>
     </ul>
   </td>
 </tr>

Answer 1

嗯，看来你自己并没有尝试太多。我会去添加 ng-change 然后调用一个函数来设置你想要的值

<input type="checkbox" ng-model="sink" data-ng-change="onSinkChanged(sink)">

$scope.onSinkChanged = function(sink) {
    // your logic here
}

并且在该函数中，您可以设置正确的值，如果未选中，则将值重置为 0 或未定义。自己尝试其中的一些，如果遇到困难，请指出您的确切问题:)

将复选框和收音机与多个 angular 模型组合

Combine checkbox and radio's with multiple angular models

angularjs

angular-ngmodel