Uncheck radio button Angular ui-bootstrap

Question

My function:

$scope.DownloadedUncheck = function (event) {
     if (event.target.value === lastChecked) {
        delete $scope.$parent.selectedDownloaded
        lastChecked = null
     } else {
        lastChecked = event.target.value
        delete $scope.$parent.selectedDownloading
     }
};

Here's my plunker : http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

I wan't to uncheck radio button after click on it. My code works with normal radio, but not with ui.bootstrap. Thanks for asnwers in advance!

Your code in the plunker doesn't show any check box. Kindly fix it then probably I will get a better idea as to where the issue is. — Gopalkrishna Narayan Prabhu
– Gopalkrishna Narayan Prabhu, Commented Aug 11, 2017 at 6:36
The plunker is changed but there is still no radio button in it. — Gopalkrishna Narayan Prabhu
– Gopalkrishna Narayan Prabhu, Commented Aug 11, 2017 at 6:51
Why do you need a radio button for this? if you only have to toggle between 2 states, why not use a check box. — Sachet Gupta
– Sachet Gupta, Commented Aug 11, 2017 at 6:53

Pang · Accepted Answer · 2017-08-11 11:12:19Z

I guess this is what you need:

HTML:

<body ng-controller="FirstCtrl">

    <label class="btn btn-default" uib-btn-radio="'True'" ng-model="$parent.selectedDownloaded" uncheckable>Downloaded
      </label>
    <br />
    <label class="btn btn-default" uib-btn-radio="'False'" ng-model="$parent.selectedDownloaded" uncheckable>To Download
      </label>

    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>#</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="name in name | filter:{Download:selectedDownloaded}">
                <td>{{name.Download}}</td>
            </tr>
        </tbody>
    </table>
</body>

Changes:

You don't have to bind a method on click.
Upgrade your bootstrap-tpls lib to ver 2.5.0
Use proper element name for bootstrap radio button. which is uib-btn-radio
Use uncheckable attribute of uib-btn-radio, to make that radio button un-check-able

updated plnkr here

Collectives™ on Stack Overflow

Uncheck radio button Angular ui-bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related