I am trying to achieve a form with:
1 input radio ( 3 options ) 2 select ( 3 options )
Depend of the choice i mad in the select, the input[radio] should change but also if i click a input[radio] the selects should show a initial value
I made an easy example to understand what im trying here on Plunkr
-A client can choose a subscription, each subscription have a combo gift ( one gadget and one computer ) defined there are 3 basic subscription: "bronze, silver and gold". If your choice match a combo plan defined, should change to some of them, and if the choice is a gadget-computer special combination, the plan should change to "platinum".
And if you click some plan the initial combo should be displayed
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
})();
I'm using Angular 1.5, with the vm syntax instead of $scope And i'm trying to avoid ng-init and setup initial values on the controller, because that said the official doc.
And i was playing with the ng-change ( think could be a good way using with the switch properly, any suggestion ? maybe a better way ?
Any help would be appreciated
You are thinking in the right direction with ng-change. Connect a function to ng-change like this
<... ng-change="someFunction()">
then in the function you set the model as desired.
$scope.someFunction = function() {
if ($scope.selectBoxValue == certainValue) {
$scope.radioButonValue = someValue;
} else { ... }
}
If this is not detailed enough let me know, I can make a more specific example.