角度ng模型依赖于形式上的其他ng模型

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

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

取决于我在选择中的选择，输入[无线电]应该改变但是，如果我单击输入[无线电]，选择应显示初始值

我做了一个简单的例子来理解我在 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（认为可能是正确使用开关的好方法，任何建议？也许是更好的方法？

任何帮助将不胜感激

你正在用ng-change朝着正确的方向思考。像这样将函数连接到 ng-change

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

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

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

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

相关内容

最新更新

热门标签：