Question

我正在尝试使用以下内容获得表单：

1个输入广播（3个选项） 2选择（3个选项）

依赖于我在选择中疯狂的选择，输入[收音机]应该改变但如果我点击输入[收音机]，则选择应显示初始值

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 { ... }
}

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

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

1 个答案: