Angular ng-model 依赖于表单中的其他 ng-model

Question

我正在尝试通过以下方式实现一种形式：

1 个输入收音机（3 个选项） 2 select（3 个选项）

取决于我在 select 中疯狂的选择，输入 [radio] 应该改变但是如果我点击一个输入[radio]，selects 应该显示一个初始值

I made an easy example to understand what im trying here on Plunkr

-一个客户可以选择一个订阅，每个订阅都有一个组合礼物（一个小工具和一台电脑）定义有 3 种基本订阅：“青铜、白银和黄金”。如果您的选择与定义的组合计划相匹配，则应更改为其中的一些，如果选择的是小工具-计算机特殊组合，则计划应更改为“白金”。

如果您点击某个计划，应该会显示初始组合

HTML

<!DOCTYPE html>
<html ng-app="client">

  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ClientController as vm">
    <h1>{{vm.title}}</h1>
    <form>
      
      
      <label ng-repeat="subscription in vm.subscriptions">
        <input type="radio" ng-model="vm.subscription" name="subscription" value="{{subscription.value}}" ng-click="vm.resetDependentFields()" required>
        {{subscription.name}}
      </label>
    
      <br>
      <br>

      <select name="gadgetList" ng-model="vm.gadget" ng-change="vm.planCombination()" ng-options="gadget for gadget in vm.subscriptions[vm.subscription].gadgetList">
      </select>


      <select name="computerList" ng-model="vm.computer" ng-change="vm.planCombination()" ng-options="computer for computer in vm.subscriptions[vm.subscription].computerList">
      </select>
      
      
    </form>
  </body>
  
</html>

JAVASCRIPT

(function () {
  'use strict';

  angular
    .module('client', [])
    .controller('ClientController', ClientController)

  function ClientController ( $log ) {
    var vm = this;
    vm.title = "NG Directives for forms"
    // Form initial value
    vm.planCombination = planCombination;
    vm.subscription    = 0;
  
    vm.subscriptions = [
      {
        name          : "bronze",
        value         : 0,
        initGadget    : "iPod",
        initComputer  : "MacBook Air",
        gadgetList    : ["iPod"       , "AppleWatch"  , "AppleTV"],
        computerList  : ["MacBook Air" , "MacBook Pro" , "iMac"],
        combination   : [["iPod","MacBookAir"]]
      },
      {
        name          : "silver",
        value         : 1,
        initGadget    : "iPod",
        initComputer  : "MacBook Pro",
        gadgetList    : ["iPod"       , "AppleWatch"  , "AppleTV"],
        computerList  : ["MacBook Air" , "MacBook Pro" , "iMac"],
        combination   : [["iPod","MacBook Pro"]]
      },
      {
        name          : "gold",
        value         : 2,
        initGadget    : "AppleWatch",
        initComputer  : "iMac",
        gadgetList    : ["iPod"       , "AppleWatch"  , "AppleTV"],
        computerList  : ["MacBook Air" , "MacBook Pro" , "iMac"],
        combination   : [["AppleWatch","iMac"]]
      },
      {
        name          : "platinum",
        value         : 3,
        initGadget    : "iPod",
        initComputer  : "iMac",
        gadgetList    : ["iPod"       , "AppleWatch"  , "AppleTV"],
        computerList  : ["MacBook Air" , "MacBook Pro" , "iMac"],
        combination   : [
          ["iPod","iMac"],
          ["AppleWatch", "MacBook Air"],
          ["AppleWatch", "MacBook Pro"],
          ["AppleTV", "MacBook Air"],
          ["AppleTV", "MacBook Pro"],
          ["AppleTV", "iMac"]
        ]
      }
    ];

    vm.gadget          = vm.subscriptions[vm.subscription].initGadget;
    vm.computer        = vm.subscriptions[vm.subscription].initComputer;

    // -----


    function planCombination () {
      if ( vm.gadget == "iPod" && vm.computer == "MacBook Air" ) {
        vm.subscription = "0";
      }
      else if (  vm.gadget == "iPod" && vm.computer == "MacBook Pro" ) {
        vm.subscription = "1";
      }
      else if (  vm.gadget == "AppleWatch" && vm.computer == "iMac" ) {
        vm.subscription = "2";
      }
      else {
        vm.subscription = "3";
      }
      
    
    }


  } // End Controller
})();

我正在使用 Angular 1.5，使用 vm 语法而不是 $scope 我正在尝试避免在控制器上使用 ng-init 和设置初始值，因为官方文档是这么说的。

我正在玩 ng-change（我认为这可能是正确使用开关的好方法，有什么建议吗？也许是更好的方法？

如有任何帮助，我们将不胜感激

Answer 1

您正在考虑使用 ng-change 的正确方向。像这样将函数连接到 ng-change

<... ng-change="someFunction()">

然后在函数中根据需要设置模型。

$scope.someFunction = function() {
    if ($scope.selectBoxValue == certainValue) {
        $scope.radioButonValue = someValue;
    } else { ... }
}

如果不够详细请告诉我，我可以举一个更具体的例子。

Angular ng-model 依赖于表单中的其他 ng-model

Angular ng-model dependent from other ng-model in forms

javascript

angularjs

ng-options

angularjs-ng-click

angular-ngmodel