So this is the relevant part of my html-code. i tried binding the "formFriendsAll" scope to the ng-model.
<form ng-submit="submitForm()" >
<div class="col-sm-3">
<div class="form-group">
<label>Which Persons to show?</label>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Friends" >
Friends
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Alle">
All
</label>
</div>
<div>currently selected: {{formFriendsAll}}</div>
</div>
</div><td><input type="submit" class="btn btn-primary" value="Los!"/></td> </form>
This is the relevant js-code:
var challenge = angular.module('challengeApp', [])
challenge.controller('challengeController', function($scope) {
$scope.submitForm = function () {
alert($scope.formFriendsAll);
};
$scope.formFriendsAll = 'Friends';
});
I used the alert to test the change of value when i hit the submit button but i tried various methods like ng-changed, ng-click, ng-value. but nothing helped me solve the issue that my alert and "currently selected" stays on "Friends"
Any suggestions?
ok guys. seems like the AdminLTE.css i used in my head for the design of the radio buttons blocked the angular somehow
Related
I am trying to select radio button but somehow they not showing up in UI side. I have verified that buttons can be pressed as it calls a function on click but UI not showing any selection.
<div data-ng-repeat="flagInfo in availableList">
<input type="radio" name="flag" id="{{flagInfo.flagName}}" value="{{flagInfo.flagName}}" data-ng-click="selection(flagInfo.flagName)" />
<span class="checkbox-label">
<label for="{{flagInfo.flagName}}">{{flagInfo.translation}}</label>
</span>
</div>
Can someone tell me how to resolve it?
Created snipet for you. you have missed ng-model in your code.
function myCtrl($scope) {
$scope.radioList={
'flagName':'abc'
}
$scope.availableList = [{
'flagName':'abc',
'id':1
},{
'flagName':'def',
'id':2
},{
'flagName':'ghi',
'id':3
},{
'flagName':'jkl',
'id':4
}];
$scope.radioChange=function(radval){
console.log(radval);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<div data-ng-repeat="flagInfo in availableList">
<input type="radio" name="flag" id="{{flagInfo.flagName}}" value="{{flagInfo.flagName}}" ng-model="radioList.flagName" ng-change="radioChange(radioList.flagName)" />
<span class="checkbox-label">
<label for="{{flagInfo.flagName}}">{{flagInfo.flagName}}</label>
</span>
</div>
<div>
Selected Radio : {{radioList.flagName}}
</div>
</div>
I know this is probably very easy! I have two radio buttons that ng-show a div with an input field if the 'site' radio button has been selected. The text input field is set to a ng-model called 'sitePostcode'. What I am trying to achieve is that if the 'solution' radio button is selected then 'sitePostcode' model will have 'solution' in it. And if the 'site' radio button is selected, then 'sitePostcode' will contain what ever was entered into the input box.
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
I thought that the radio buttons should also be 'sitePostcode' model, but when I tried that and entered text into the input field the div would dissapear as the model value changes from 'site'. Cheers
You can watch changes of product.group and change sitePostcode in accordance to it.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope) {
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal) {
if (newVal === 'Solution') {
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
} else {
$scope.sitePostcode = customPostcode;
}
});
});
</script>
</body>
</html>
The radio buttons should belong to a group. Add 'name' attribute to the input fields and give them the same value.
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
Radio buttons can be tricky in Angularjs. Here is a great example of how they can work: http://jsfiddle.net/K9MLk/246/.
I think that the best way to do this is to check the product.group value in the controller and set the sitePostcode to Solution.
Another way to do this is as you suggested. You can set the ng-model of your radio buttons to sitePostcode and change your check to ng-show="product.group != 'Solution'". This is assuming that the user will not type Solution in the input field.
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
But as I said it is best to do this in the controller.
I have put together what I thought would be a very simple example of how I could fire off a function from a checkbox being checked in angular and have that function check to see the new value of the checkbox and accordingly display or not display a message. It works, but only after I have checked and unchecked the box at least once. For this reason I figured I simply would need to default the checkbox value to false and that would take care of the problem but it didn't. Can anyone help me tweak this to get it working and if so, maybe explain why my thinking is flawed, what do I not understand about the $scopes state. BTW it is also flipped, meaning that when I check the box the message goes away and when I uncheck it it says it's checked.
I am doing these exercises to get a better idea how angular works and I know deep down this is a javascript issue, but I still don't have it figured out. Any help is appreciated
app.js
var formApp = angular
.module('formApp', [])
.controller('formController', function($scope) {
$scope.formData = {};
$scope.redCheckFunction = function() {
if ($scope.formData.favoriteColors.red == true){
$scope.redMessage = "red is checked";
} else {
$scope.redMessage = "";
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div>
<h2>Angular Checkboxes</h2>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name"
ng-model="formData.name">
<label>Description</label>
<input type="text" class="form-control" name="description"
ng-model="formData.description">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.red"
ng-init="favoriteColors.red.disabled=false"
ng-click="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.green"> Green
</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
<h2>{{redMessage}}</h2>
</form>
<h2>Sample Form Object</h2>
<pre>
{{ formData }}
</pre>
</div>
</body>
</html>
I created a pen to make things easier:
Checkbox Pen
ng-click is fired before the model is updated:
Note that ngClick events will occur before the model is updated.
You need to use the ng-change directive:
Evaluate the given expression when the user changes the input.
http://codepen.io/anon/pen/azaJob
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
When you enter the function redCheckFunction the value is already updated.
I am new in angularjs.I want to fetch the radio button value when user click a button,but my bad luck its not working.Here is the code
<label class="item item-radio">
<input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt1}}">
<div class="item-content item-body">a) {{questions.quiz_ans_opt1}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio item-body">
<input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt2}}">
<div class="item-content item-body">b) {{questions.quiz_ans_opt2}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<button class="button button-balanced button-block" ng-click="submitAnswer(user)">Submit</button>
Here is controller
$scope.submitAnswer = function(user) {
//it output undefined error
alert(user);
}
Also i want to disable the button until a radio button is checked,how can i achive this?
Please have a look at this,
Try this,
In html,
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="radio" ng-model="user.answer" ng-value="'option a'">
<label>option a</label>
<br>
<input type="radio" ng-model="user.answer" ng-value="'option b'">
<label>option b</label>
<br>
<input type="radio" ng-model="user.answer" ng-value="'option c'">
<label>option c</label>
<br>
<input type="radio" ng-model="user.answer" ng-value="'option d'">
<label>option d</label>
<br>
<button ng-disabled="!user.answer" ng-click="submitAnswer(user)">Submit</button>
</body>
In app.js,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.submitAnswer=function(user){
alert(user.answer);
}
});
Here is the plunker demo for the same
Though a bit late, i would like to post a second approach, since you are using Ionic-Framework.
If you at all have a dynamic number of radio button options, that are being driven by backend data [Even if you have a static
radio button set, you can convert it to the formal], Then you should instead use Ionic's Radio Buttons :
I.E, In your HTML :
<ion-radio ng-repeat="user in userAnswers"
ng-value="user.answer"
ng-model="finalAnswer">
{{ item.text }}
</ion-radio>
And in your controller :
$scope.userAnswers = [
{ text: "Backbone", answer: "bb" },
{ text: "Angular", answer: "ng" },
{ text: "Ember", answer: "em" },
{ text: "Knockout", answer: "ko" }
];
$scope.finalAnswer = 'ng';
More Details can be found in the official documentation and the CodePen Demo
This post really helped me out. I ended up changing all my radio button ng-click events to ng-change. Hope this helps.
AngularJS - Trigger when radio button is selected
HTML
<form class="controls" id="Filters">
<fieldset>
<div id="sample-showcase" class="noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
<div id="rangespan-container">
<span id="min-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
<span id="max" class="range-spans"> - </span>
<span id="max-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
</div>
<div class="range-button checkbox">
<input type="checkbox" class="rangecheck"/></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Filter</h3>
<div class="breakfast-filter checkbox">
<input type="checkbox" class="checkbox1" value=".category-breakfast"/>
<label>Breakfast</label></div>
<div class="lunch-filter checkbox">
<input type="checkbox" class="checkbox2" value=".category-lunch"/>
<label>Lunch</label></div>
<div class="dinner-filter checkbox">
<input type="checkbox" class="checkbox3" value=".category-dinner"/>
<label>Dinner</label></div>
<div class="snacks-filter checkbox">
<input type="checkbox" class="checkbox4" value=".category-snacks"/>
<label>Snacks</label></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Sort</h3>
<div class="sort" data-sort="protein:asc">Low to High</div>
<div class="sort" data-sort="protein:desc">High to Low</div>
<div class="sort" data-sort="random">Random</div>
</fieldset>
<button id="Reset">Clear Filters</button>
</form>
Snippet of JS
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(){
self.$filters[0].reset();
self.parseFilters();
});
}
self.$reset = jQuery('#Reset'); it is defined higher in the code. Not sure if this is enough info.
Here is the link to the full code: Click Here
If you go to the home page click on some filters then try resetting. You should see it work like it's suppose to then take you to domain.com/?
Not sure why
Help please
button elements are submit buttons by default. You have to set type="button" if you to make them "dummy" buttons, i.e. they don't have a any default behavior:
type="button": The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
<button type="button" id="Reset">Clear Filters</button>
Of course you could also set it to type="reset" and let the browser take care of resetting the form elements for you:
type="reset": The button resets all the controls to their initial values.
Then you could simplify your event handler to:
self.$reset.on('click', function(){
self.parseFilters();
});
It's not a huge change, but if the browser already offers this feature, why not make use of it?
Because you are using a button within the form and it is not prevented its default behavior.
Hence after resetting the form, the form is getting submitted.
You either have to return false after the function or preventDefault(). Try this.
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
Or you need to set the type="button" for the button tag to make sure they are of type button and not submit.
<button id="Reset" type="button">Clear Filters</button>