Updating a different model using radio buttons with angular

Question

I know this is probably very easy! I have two radio buttons that ng-show a div with an input field if the 'site' radio button has been selected. The text input field is set to a ng-model called 'sitePostcode'. What I am trying to achieve is that if the 'solution' radio button is selected then 'sitePostcode' model will have 'solution' in it. And if the 'site' radio button is selected, then 'sitePostcode' will contain what ever was entered into the input box.

<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>

<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>

I thought that the radio buttons should also be 'sitePostcode' model, but when I tried that and entered text into the input field the div would dissapear as the model value changes from 'site'. Cheers

Kostya Shkryob · Accepted Answer · 2015-03-24 20:40:23Z

You can watch changes of product.group and change sitePostcode in accordance to it.

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    </head>
    <body data-ng-app="app" data-ng-controller="MainController">
        <div>
            <input type="radio" ng-model="product.group" value="Solution">Solution
            <input type="radio" ng-model="product.group" value="Site">Site
        </div>

        <div ng-show="product.group == 'Site'">
            <input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
        </div>

        <script>
            var app = angular.module('app', []);
            app.controller("MainController", function($scope) {
                var customPostcode = '';
                $scope.$watch('product.group', function (newVal, oldVal) {
                    if (newVal === 'Solution') {
                        customPostcode = $scope.sitePostcode;
                        $scope.sitePostcode = 'Solution';
                    } else {
                        $scope.sitePostcode = customPostcode;
                    }
                });
            });
        </script>
    </body>
</html>

Bronwen · Accepted Answer · 2015-03-24 20:37:12Z

1

The radio buttons should belong to a group. Add 'name' attribute to the input fields and give them the same value.

<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution

<input name="group1" type="radio" ng-model="product.group" value="Site">Site

Radio buttons can be tricky in Angularjs. Here is a great example of how they can work: http://jsfiddle.net/K9MLk/246/.

answered Mar 24, 2015 at 20:37

Bronwen

364 bronze badges

Comments

Ivan Stoyanov · Accepted Answer · 2015-03-24 20:39:24Z

I think that the best way to do this is to check the product.group value in the controller and set the sitePostcode to Solution.

Another way to do this is as you suggested. You can set the ng-model of your radio buttons to sitePostcode and change your check to ng-show="product.group != 'Solution'". This is assuming that the user will not type Solution in the input field.

    <div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>

<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>

But as I said it is best to do this in the controller.

Collectives™ on Stack Overflow

Updating a different model using radio buttons with angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related