Angular js switch between model

Question

I'm pretty new to AngularJs and I'm locked on a little part of code:

In my UI, I've a radio button and a table (ng-grid). In my controller, I've a json array for each radio choices.

How Can I dynamically bind my table datas dependending on the selected radio button?

Example: I've a radio with A and B choices.

 <div class="btn-group">
            <button type="button" class="btn btn-primary" ng-model="choice" btn-radio="'A'">A</button>
            <button type="button" class="btn btn-primary" ng-model="choice" btn-radio="'B'">B</button>
        </div>
<div class="gridStyle" ng-grid="gridOptions">
        </div>

Controllers got three arrays:

$scope.choice = 'A'
$scope.A = {name: 'A', propA: 'Aprop'}
$scope.B = {name: 'B', propB: 'Bprop'}
$scope.gridOptions = ?????

Thank you in advance.

Charlie

One quick question: what is btn-radio in your radio element? Is it a subsitute for value? edit: I guess it's a bootstrap button radio equivalent. — Narretz
– Narretz, Commented Jun 24, 2013 at 8:15
Angular-bootstrap (angular-ui) component for radio button. The btnradio directive will switch the $scope.choice value in the controller. — Tcharl
– Tcharl, Commented Jun 24, 2013 at 8:16

Narretz · Accepted Answer · 2013-06-24 08:16:33Z

2

You can watch $scope.choice:

$scope.$watch('choice', function(newVal, oldVal) {
  $scope.gridOptions = $scope.choice;
});

This requires that you set $scope.choice to the whole $scope.A object. I don't know if this works with bootstrap radio buttons, but it works with normal angular radio buttons.

answered Jun 24, 2013 at 8:16

Narretz

4,9831 gold badge35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tcharl Over a year ago

Yes, $watch seems good. I think I'll read the angular documentation next time. Thank you!

ehfeng · Accepted Answer · 2013-06-24 08:35:03Z

2

You can set a scope.$watch expression on "choice" that swaps out the data being assigned to gridOptions.

Inside your controller

$scope.$watch('choice', function(newValue, oldValue) {
    if ($scope.choice == 'A') { 
        $scope.gridOptions = ?????? 
    } else { 
        $scope.gridOptions = ????? 
    }
})

EDIT: $digest is not necessary, as the watch expression is only called during a digest cycle.

edited Jun 24, 2013 at 8:35

answered Jun 24, 2013 at 8:19

ehfeng

3,8754 gold badges35 silver badges42 bronze badges

1 Comment

Narretz Over a year ago

It shouldn't be necessary to call $scope.digest(), because $watch triggers a digest cycle anyway.

Collectives™ on Stack Overflow

Angular js switch between model

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related