I am using bootstraps radio buttons inside of an ng-repeat directive. However, the changes are not propagated to the underlying model. This is the code:
Add Item
<div class="alert alert-info">
<div ng-repeat="item in data.list track by $index">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-default"><input type="radio" data-ng-model="item.value" value="1">1</label>
<label class="btn btn-sm btn-default"><input type="radio" data-ng-model="item.value" value="2">2</label>
</div> {{ item.value }}
</div>
</div>
The same example is working, as soon as I remove the button group and replace it with ordinary radio buttons like this:
Add Item
<div class="alert alert-info">
<div ng-repeat="item in data2.list track by $index">
<input type="radio" data-ng-model="item.value" value="1">
<input type="radio" data-ng-model="item.value" value="2">
{{ item.value }}
</div>
</div>
I have setup a plunkr: http://plnkr.co/edit/ROLW8lluX6DrM3w2UUlH?p=preview
This line (from your plunker) is the problem:
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
The Bootstrap JS catches the click event on the wrapping label before AngularJS can register it on the radio input. Removing the bootstrap JS from your code fixes the problem (or at least works around it).
In general, it can become problematic to use the Bootstrap JS together with AngularJS.
Instead, consider using the AngularUI Bootstrap library instead. It also provides implementations for radio inputs masked as buttons, as well as some other Bootstrap JS-related functionality.
The Javascript doesn't actually change the values of the radio buttons; it just toggles the active class of the buttons that mask the radio buttons.
Consider using the button directive from AngularUI Bootstrap.
Related
If i place checkbox in header of uib-accordion, its not getting checked
<uib-accordion>
<div uib-accordion-group class="panel-default"
is-open="daily"
is-disabled="false">
<uib-accordion-heading>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="daily">
Daily
</label>
</div>
</uib-accordion-heading>
This content is straight in the template.
</div>
</uib-accordion>
The accordion is capturing the checkbox click event, you will need to stop propagating the event to the accordion when you click the checkbox
HTML
<input type="checkbox" ng-click="preventCheck($event)" ng-model="daily">
JS
$scope.preventCheck = function(e) {
e.stopPropagation();
}
You can even inline it if you want
ng-click="$event.stopPropagation();"
Try with
<input type="checkbox" checked="somevalue" ng-model="daily">
You can put alos ng-true-value and ng-false-value
Try uib-btn-checkbox directive. This will toggle your binded model on click.
Use ng-click="$event.stopPropagation()" to stop click events from bubbling up
<input type="checkbox" uib-btn-checkbox ng-model="daily" ng-click="$event.stopPropagation()">
In the form I am designing, I would like to show a < input="date"> field for anniversary-date if the user selects a radio button with value = "married".
For now, I have replaced the same with a div saying "Anniversary date input will appear here".
My problem is that, user.maritalStatus == 'married' is always set to false.
I know this because ng-show doesn't show the message. ng-hide shows this message.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group">
<div class="btn-group col-md-6 col-md-offset-4" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="single" data-ng-model="user.maritalStatus">Single
</label>
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="married" data-ng-model="user.maritalStatus">Married
</label>
</div>
</div>
<!-- following does NOT work -->
<div data-ng-show="user.maritalStatus == 'married'">Anniversary date input will appear here</div>
I followed these examples:
http://codepen.io/SusanneLundblad/pen/iBhoJ
OnClick radio button show hide div angular js - the one answered by michael (highest upvotes)
but I am not getting it to work.
Thanks!
EDIT:
Codepen link: http://codepen.io/vipulnj/pen/KperpO
You would need to wrap your content inside <div ng-app=""> </div> if you have not already
i 'm using jquery plugin with angular , the problem is plugin works without ng-switch but doesn't work with ng-switch .
Any idea ?Thanks in advance
Demo
<ng-switch on="data">
<div ng-switch-when="true" class="form-group">
<label class="sr-only" for="exampleInput3">تاریخ</label>
<div class="input-group">
<div class="input-group-addon" data-MdDateTimePicker="true" data-trigger="click" data-targetselector="#exampleInput3">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<input type="text" class="form-control" id="exampleInput3" placeholder="تاریخ" data-MdDateTimePicker="true" data-placement="right" />
</div>
</div>
<div class="leftWrapper" ng-switch-default>
say Hi
</div>
</ng-switch>
The reason why it doesn't work is Jquery plugin has no idea to where to send click event (in your case) when ng-if recreates DOM. And for sure it doesn't trigger digest cycle.
To make it work you can do it by two ways:
or create directive for jQuery plugin (for me more appropriate)
or change to ng-show/hide see DEMO. ngShow directive shows or hides the given HTML element on CSS level
For DOCS see ng-if
I have ng-table with the hidden columns feature. It has a basic checkbox as the toggle. I designed it to look a little nicer but I cant get it to work.
plunkr
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" ng-model="column.visible"> <span class="glyphicon glyphicon-check"></span>
</label>
</div>
It's because of Bootstrap's Button plugin.
Are you using Bootstrap at all for this? I just removed Bootstrap's javascript file and it worked.
If you need Bootstrap, you either need to make a custom build of it or remove the data-toggle="buttons" from your div and style it yourself.
On my page, I have dynamically created radio buttons. I want to change wrapper background color when radio button is selected.
following is my code
<section ng-repeat="list in myList">
<div class="radioWrapper">
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
</section>
I want to add "selectedRadioBg" class at the radioWrapper when each radio is selected.
Appreciate any help
<section ng-repeat="list in myList">
<div ng-class="myClass">
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
</section>
// in controller/link
if($scope.list.name){
$scope.myClass = {background: #B250C2};
}
See: ngClass
What's happening
You got a ngModel list.name on your radio button. If the radio is checked, it's value evaluates to true
You watch for $scope.list.name to be true, and if so, set an object named myClass to your scope, which contains the styles. This object is bound to your markup:
<div ng-class="myClass">
You can make use of the ng-class directive. Documentation can be found here.
This directive allows you to conditionally apply a class based on an expression, in this case the radio button selection.
So, using your example, you can have the following code:
<div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
list.name acts as a truthy / falsy expression here.
<section ng-repeat="list in myList">
<div class="radioWrapper" ng-class="{'selectedRadioBg': list.name}>
<input type="radio" name="{{list.category}}" ng-model="list.name">
<label>{{list.name}} </label>
</div>
</section>
Replace with
<section ng-repeat="list in myList">
<div class="radioWrapper" style="background: {{list.name}} none repeat scroll 0% 0%;">
<input type="radio" name="{{list.category}}" ng-model="list.model">
<label>{{list.name}} </label>
</div>
</section>
**Do not put your list.name in ng-model directive.