How to make checkboxes behave like radio buttons?

[Dave Gruska]

The project manager doesn't want to have a "none" option on radio buttons, so I need to have checkboxes behave like radio buttons.

Can I do this without jQuery?

BTW, the following directive sort of works, but Angular doesn't pick up on a change when the item is switched:

HTML:

<div ng-repeat="i in options">

     <input type="checkbox" name="pumpingOptions" ng-model="i.qty" ng-change="getPartNumberValue(i)" value="{{i.name}}" unique-checkbox class="uniqueCheckbox"> {{i.name}}<br/>

</div>

JS:

App.directive('uniqueCheckbox', function() {

return {

retrict: 'A',

link: function(scope, element) {

element.click(function() {

scope.$apply($('input.uniqueCheckbox:checked').not(this).removeAttr('checked'));

});

}

}

});

Any help would be greatly appreciated. I can put the whole thing into Plunker if needed - let me know.

Thanks,

Dave

[Andy Joslin]

You can use `ng-checked` to do this pretty easily :-)

http://plnkr.co/edit/DpNt2foqvRwoaKXbm55Z

[Dave Gruska]

Sweet! Thanks, you pointed me in the right direction. To get this to work with dynamically-generated checkboxes, I modified the code to this:

HTML:

<div ng-repeat="i in options">

     <input type="checkbox" value="{{i.name}}" ng-checked="$parent.model==i.id" ng-click="getPartNumberValue(i)"> {{i.name}}<br/>

</div>

JS (in the controller):

$scope.getPartNumberValue = function(i) {

     $scope.model = i.id;

     //other processing...

}

Thanks,

Dave

On Thu, Jun 13, 2013 at 3:55 PM, Andy Joslin <andyt...@gmail.com> wrote:

You can use `ng-checked` to do this pretty easily :-)

http://plnkr.co/edit/DpNt2foqvRwoaKXbm55Z

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/5qm1q8zt54o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Dave Gruska]

Actually, what I posted yesterday wasn't the whole solution. The exclusionary checkboxes worked, but didn't report back a value if no checkboxes were selected. To get this to work, I had to change the code to this (not sure why "$scope.model" didn't automatically update, though - had to pass it into the function):

HTML:

<div ng-repeat="i in options">

<input type="checkbox" id="{{i.id}}" ng-checked="$parent.model==i.id" unique-checkbox> {{i.name}}<br/>

</div>

JS (directive):

App.directive('uniqueCheckbox', function() {

return {

restrict: 'A',

controller: function($scope, $element, $attrs) {

$element.click(function() {

if(!this.checked) {

$scope.$apply(function() {

$scope.model = "00";

$scope.getPartNumberValue($scope.model);

});

} else {

$scope.$apply(function() {

$scope.model = $attrs.id;

$scope.getPartNumberValue($scope.model);

});

}

});

}

}

});

JS (controller):

$scope.getPartNumberValue = function(i) {

     $scope.model = i;

     //other processing

}

Not sure how closely this follows best practices, though - still wrapping my head around directives and Angular in general.

Dave

On Thursday, June 13, 2013 4:52:22 PM UTC-4, Dave Gruska wrote:

Sweet! Thanks, you pointed me in the right direction. To get this to work with dynamically-generated checkboxes, I modified the code to this:

HTML:

<div ng-repeat="i in options">

     <input type="checkbox" value="{{i.name}}" ng-checked="$parent.model==i.id" ng-click="getPartNumberValue(i)"> {{i.name}}<br/>

</div>

JS (in the controller):

$scope.getPartNumberValue = function(i) {

     $scope.model = i.id;

     //other processing...

} 

Thanks,

Dave

On Thu, Jun 13, 2013 at 3:55 PM, Andy Joslin wrote:

You can use `ng-checked` to do this pretty easily :-)

http://plnkr.co/edit/DpNt2foqvRwoaKXbm55Z

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/5qm1q8zt54o/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.