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/
Related
I have radio buttons bond with a model but when I select a radio-button of them, the model value does not get changed and the ng-change event does not get fired.
<div required-field="{{$ctrl.model.requiredField}}" ng-click="$ctrl.model.active = true">
<select required>
<option selected disabled hidden value="{{$ctrl.model.selected}}">
{{$ctrl.model.transport.length > 0 ? $ctrl.model.transport : $ctrl.model.generaltext}}
</option>
</select>
<div class="dropdown-list" ng-if="$ctrl.model.active">
<ul>
<li ng-repeat="car in $ctrl.model.cars">
<div class="radio">
<input type="radio" id="car-{{car.id}}" ng-value="car" name="car"
ng-model="$ctrl.model.transport"
ng-change="$ctrl.model.active = false"
>
<label for="car">
{{car.name}}
</label>
</div>
</li>
</ul>
</div>
I cannot find the reason for such a behavior.
Thanks in advance.
Radio buttons work for a multiple-choice selection. On/off would be a checkbox.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
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()">
I am trying to follow the angular docs for radio buttons.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
Don't know what I'm doing wrong.
Ultimately, I want the div "stuff" to have class "muted" if radio option 3 is selected.
my html:
<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" >
[{{shippingVm.shipOption.val}}]
<div class="col-sm-3 col-sm-offset-1">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" />
I will call Purolator for a pickup.
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" />
I will deliver them to Purolator.
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" />
I will deliver them to the Wizmo warehouse myself.
</label>
</div>
<div class="ng-class="shippingVm.shipOption.val">
stuff
</div>
</form>
my controller:
vm.shipOption = {val: "NOT-muted"};
This debugging line in the HTML checks to see if I'm getting the right value:
[{{shippingVm.shipOption.val}}]
It starts with [NOT-muted] - as it should. But the moment I select any radio button it goes blank.
According to the docs, clicking a radio should pass the radio's value into the model.
What am I missing?
Your ng-class is incorrect. See the below snippet for an example of what it should be. The second problem is that you want value instead of ng-value. From: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
value The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).
ngValue Angular expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).
.muted {
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
<div ng-class="{'muted': formData.chickenEgg === 'egg'}">
stuff
</div>
</div>
Oh, I see it now.
The radio buttons should have value="muted" not ng-value="muted".
ng-value is only used in a special case.
I'm trying to get the selected value when clicking the submit button of a form which contain ng-repeat and the select generated by ng-options. But I can not reach the selected value, can you please take a look at my code and tell me what I'm I missing?
<form class="form-horizontal">
<!-- Options -->
<div class="product-page-options">
<div class="form-group clearfix" ng-repeat="option in product.options.data">
<label class="col-md-4 control-label pull-left">{{ option.name }}</label>
<div class="col-md-8">
<select class="form-control" ng-options="value.name for value in option.values.data" ng-model="selectedValue">
<option value="">Select {{ option.name }}</option>
</select>
</div>
</div>
</div>
<!-- Add to cart -->
<div class="product-page-cart">
<div class="product-quantity">
<input type="number" value="1" class="form-control input-sm">
</div>
<button class="btn btn-primary" type="submit" ng-click="add(selectedValue)">Add to cart</button>
I have tried to print the selected value by putting {{ selectedValue }} inside the ng-repeat div and it display perfectly as expected, however if I try to put it outside of the div then nothing print out.
The json data which i'm used to build the form here http://pastebin.com/nah3Pt5r
// Edit:
I just googled and found a fiddle doing like me: http://jsfiddle.net/DrQ77/ so I decided to modify the ng-model to selected[option.name] but the $scope.selected still show undefined.
// Edit 2:
Okay, problem solved by adding the $scope.selected = {}; in the controller.
Thank you for your time!
Your ng-options has an isolated scope. So inside the selectedValue is known, but outside it's not (as you state in your question).
Define a variable on your parent scope and assign that to your ng-model of your ng-options and you should be able to access that variable outside your ng-options.
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.