current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

What I'm trying to do is have a service (lets say: myService) that holds specific data like objects representing printers present and selected:

var localPrinters = [{ id: 12, name: 'HP', type: 'laser' },
                     { id: 33, name: 'Lexmark', type: 'laser' }];
var activePrinter = {};

In some view that gets shown occasionally (like app settings), I have a controller that would define variables in the local scope which would point to the objects in the injected myService.

The view would then use ng-repeat to iterate over printer objects in localPrinters and display radio buttons that correspond to each object in the array..

Now i need two things..
1) update the activePrinter upon radiobutton selection change with the corresponding object value
2) in case the activePrinter already contains an object, when the view loads i want the corresponding radio to be checked already (if its value object matches the object in activePrinter, otherwise none should be selected.

I've managed 1) in a couple of ways.. either sticking to the model usage or adding methods to call upon ng-change.

 //pseudocode
 <container ng-repeat="printer in printers" >
      <radio ng-value="printer" ng-model="$scope.activePrinter"/>
 </container>

or

//pseudocode
 <container ng-repeat="printer in printers" >
      <radio ng-value="printer" ng-change="selectPrinter(printer)" "ng-model="$scope.activePrinter"/>
 </container>

What i'm having trouble with is 2) Not sure if there's a way in angular to automatically figure out some of the printer values matches the activePrinter selection and make the radio checked. Also not sure of the way i'm using ng-model for this purpose.

Any pointers? Thanks!

share|improve this question
    
Have you checked Angular input radio docs? – link Mar 24 at 23:12

1 Answer 1

up vote 0 down vote

You can do that in this way:

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

app.controller('firstCtrl', function($scope) {

  $scope.printers = [{
    id: 12,
    name: 'HP',
    type: 'laser'
  }, {
    id: 33,
    name: 'Lexmark',
    type: 'laser'
  }];

  $scope.activePrinter = {};
  
  //set default printer
  $scope.activePrinter.printer = $scope.printers[0]

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">

    <div class="container" ng-repeat="printer in printers">
      <label>{{printer.name}}</label>
      <input type="radio" ng-value="printer" ng-model="activePrinter.printer" />
    </div>

    Active Printer:{{activePrinter.printer.id}} | {{activePrinter.printer.name}} | {{activePrinter.printer.type}}

  </div>
</body>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.