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

【问题标题】：Angular ng-model dependent from other ng-model in formsAngular ng-model 依赖于表单中的其他 ng-model
【发布时间】：2016-02-29 11:30:18
【问题描述】：

我正在尝试通过以下方式实现表单：

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

取决于我在选择中疯狂的选择，输入[收音机]应该改变而且如果我点击一个输入[radio]，选择应该显示一个初始值

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（认为正确使用 switch 可能是一个好方法，有什么建议吗？也许是更好的方法？

任何帮助将不胜感激

【问题讨论】：

您可以使用浏览器中的开发工具 (ctrl+alt+I) 检查 plnkr 的错误消息，消息是“planCombination is not defined”。您正在控制器中设置该值，但它是未知的。
哦，我不知道我可以在检查器上看到，现在正在工作的示例，将尝试使用 ng-change :)

标签： javascript angularjs angular-ngmodel angularjs-ng-click ng-options

【解决方案1】：

ng-change 的思路是正确的。像这样将函数连接到 ng-change

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

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

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

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

【讨论】：

嗨，谢谢你的回答，我在 plunkr 上做了一个完美的例子，但由于某种原因，html 没有使用控制器，在我的机器上本地工作：S ng-change 应该位于在选择标签对吗？（我的意思是，没有其他地方可以放置它，因为
是的，将 ng-change 放在 select 标签中，因为如果选择更改，您想做出反应。然后在函数中检查模型的值。
好的，但是选项会生成这个： value="string:iPod 在更改函数中，我应该使用 if (vm.gadget == "iPod) 还是 (vm.gadget == "string:iPod " ) 也许这是一个愚蠢的问题，但我不知道为什么这个值有那个字符串：语法，我们已经知道它是一个字符串......
好的，ng-changes 与 select 配合得很好，但是当我更改输入 [radio] 时，我现在如何使用 ng-change（或其他指令），你知道，如果我在订阅中点击右键
您必须向收音机添加另一个具有不同功能的 ng-change。你试过了吗？