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()">
Related
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
First I create a simple example to see if the ng-focus and ng-blur are driggered on select, and then are my actual code, I cannot find why the second do not work:
<div ng-app ng-init="focus=false;blur=false;active=false">
<select ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
<option>sdasdsa</option>
<option>dsadsads</option>
</select>
<input type="text" ng-class="{ myFocus: focus, myBlur: blur }">
</div>
<br>
<br>
<br>
<br>
<div class="search-input" ng-init="focus=false;blur=false;active=false">
<input type="text" ng-class="{ myFocus: focus, myBlur: blur }">
<div class="selects">
<div class="icon fluid select">
<i ng-class="{'large svg guests icon':rooms==2, 'large svg guest icon':rooms==1,'active':{{focus}}}"></i>
<label ng-click="closeCalendar()">
<select ng-model="rooms" name="rooms" class="fluid" name="rooms" focus-parent selecter required ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
<option value="1">Einzelzimmer</option>
<option value="2">Doppelzimmer</option>
</select>
</label>
</div>
</div>
</div>
http://jsfiddle.net/deathhell/UTn5y/2/
You cannot use ng-focus and ng-blur for a select element.
The alternative is to use ng-change which will trigger when a new option is selected.
Note that with ng-change, it is required to have ng-model as well.
http://jsfiddle.net/5bv2Z/
You can use ng-focus and ng-blur on select elements. Just be aware that:
ng-focus - focus is achieved only when you click on select element.
ng-blur - focus is lost only when you click on any other element except the select element.
See example:
http://jsfiddle.net/5bv2Z/19/
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.
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.
I have a model like this:
$scope.user = { is_active: true }
I'm currently displaying that in my template like this:
<form class="form-horizontal">
<!-- ... -->
<div class="form-group">
<label class="col-sm-2 control-label">Is Active</label>
<div class="btn-group col-sm-5" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
Active
</label>
<label class="btn btn-default">
<input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
Inactive
</label>
</div>
</form>
This looks like this in practice:
How can I bind the value of {{ user.is_active }} to this button group in Bootstrap? I'd like the correct button to be depressed based on what's selected in the model.
You may also want to look at the buttons in Angular's bootstrap ui- these are designed to work cleanly with Angular and so they use ngModel directly.
If you go this route you'll need to use ngModel by adding it to your buttons like this:
<input type="radio" ng-model="user.is_active" name="is_active">
Sticking with the default Twitter Bootstrap- it uses the class active to define which label is active. To set this you can use ngClass. For instance on the label you want active when is_active is true you'll want this:
ng-class="{active:user.is_active==true}
And to control the value you'll need to use 'ngClick' on the label to toggle the value.
<label class="btn btn-default" ng-class="{active:user.is_active==true}" ng-click="setActive(true)">
<input type="radio">
Active
</label>
<label class="btn btn-default" ng-class="{active:user.is_active==false}" ng-click="setActive(false)">
<input type="radio">
Inactive
</label>
And the new function:
$scope.setActive = function(val) {
$scope.user.is_active= val;
};
demo fiddle