button radio change value in another controller with ng-click in angular js

Question

I have two controllers , a controller filter and a display controller results in the first I have a group of radio button , when you change the radio button , sending an event to change the value displayed in the second controller , the code is as follows : I know not coment changed immediately in the second controller

HTML :

      <div ng-controller="MyCtrl1">
    <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol">
        <br>
         <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol">

        </div>

<div ng-controller="MyCtrl2">
on change button radio evol = {{displayEvol}}
</div>

Angular:

var myApp = angular.module('myApp',[]);

    function MyCtrl1 ($scope) {

     $scope.setSelectedEvol = function (value) {

               $scope.selectedEvol = value;
                switch ($scope.selectedEvol) {
                    case 'evol1':
                        $scope.evol = 'Evol. VA';
                     break;
                    case 'evol2':
                        $scope.evol = 'Evol. %';
                       break;

                }

            $rootScope.$broadcast('ctr1Data', $scope.evol);

    }

    function MyCtrl2 ($scope) {

     $scope.$on('ctr1Data', function (event, args) {
        $scope.displayEvol= args;

    });


    }

you may need to use $rootScope.$on and its better if you create sharedService instead of directly using the controllers. — batmaniac7
– batmaniac7, Commented May 11, 2015 at 17:51
using $rootScope is not recommended... it's better to avoid using $rootScope.. if you want to share data between controllers then use services or make them inherited. — Ritt
– Ritt, Commented May 11, 2015 at 18:10

jad-panda · Accepted Answer · 2015-05-11 18:13:08Z

see this fiddle

http://jsfiddle.net/jigardafda/skyk3erh/

Using events

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
        <br/>
        <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
    </div>
    <div ng-controller="MyCtrl2">
        on change button radio evol = {{displayEvol}} 
    </div>
 </div>

JS

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope, $rootScope) {
        $scope.setSelectedEvol = function (value) {

            $scope.selectedEvol = value;

            switch ($scope.selectedEvol) {
                case 'evol1':
                    $scope.evol = 'Evol. VA';
                    break;
                case 'evol2':
                    $scope.evol = 'Evol. %';
                    break;          
            }

            $rootScope.$broadcast('ctr1Data', $scope.evol);

        };
    })
    .controller('MyCtrl2', function ($scope, $rootScope) {
        $scope.displayEvol = '';

        $scope.$on('ctr1Data', function (event, args) {
            $scope.displayEvol= args;

        });

    });

Using $parent

this will work if both controllers are side by side.

http://jsfiddle.net/jigardafda/skyk3erh/2/

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
        <br/>
        <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
    </div>
    <div ng-controller="MyCtrl2">
        on change button radio evol = {{displayEvol}}
        <br/>
        {{balue}}
        <br/>
        {{$parent.balue}}
    </div>
 </div>

JS

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope, $rootScope) {
        $scope.setSelectedEvol = function (value) {

            $scope.selectedEvol = value;

            switch ($scope.selectedEvol) {
                case 'evol1':
                    $scope.evol = 'Evol. VA';
                    break;
                case 'evol2':
                    $scope.evol = 'Evol. %';
                    break;          
            }

            $rootScope.$broadcast('ctr1Data', $scope.evol);

            $scope.$parent.balue = $scope.evol;
        };
    })
    .controller('MyCtrl2', function ($scope, $rootScope) {
        $scope.displayEvol = '';

        $scope.$on('ctr1Data', function (event, args) {
            $scope.displayEvol= args;

        });

    });

Collectives™ on Stack Overflow

button radio change value in another controller with ng-click in angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related