Hi Friends I have radiobuttons
"%" and "Count"
If i click "%" then In the text box "%" Should be placeholder
If i click "Count" Then "Count" Should be placeholder for same textbox
Here Fiddle link:http://jsfiddle.net/qbauuzj2/
Html
<div class="winner-par">
<p>Winner Parameter</p>
<div class="onoffswitch-green2">
<input type="radio" id="radios5" name="radiosg5" class="SwitchOn" value="true" checked
ng-click="radioChecked()">
<label for="radios5">%</label>
<input type="radio" id="radios6" name="radiosg5" class="SwitchOff" value="false" ng-click="radiounChecked()">
<label for="radios6">Count</label>
</div>
</div>
<input type="text">
You can dynamically update DOM-elements
<div ng-app="" ng-controller="Controller">
...
<input type="text" placeholder="{{placeholder}}" />
</div>
Your controller
function Controller($scope) {
$scope.radioChecked = function ()
{
$scope.placeholder="%";
$scope.apply();
}
$scope.radiounChecked = function ()
{
$scope.placeholder="Count";
$scope.apply();
}
}
http://jsfiddle.net/z21qfwqz/14/
If you use >1.1.3 angular version - better way for this ng-attr-placeholder(thanks for Teq1)
<input type="text" ng-attr-placeholder="{{placeholder}}" />
Look at this
Follow this example:
Change value of input placeholder via model?
Depending on which is selected, change the value of the "placeholder" variable in your scope, then bind that variable to the placeholder attribute on the element.
Related
I want to get the result of adding to two text box value inside a controller
<div ng-app="">
<p>First Number:
<input type="text" ng-model="a" />
</p>
<p>Second Number:
<input type="text" ng-model="b" />
</p>
<p>Second Number:
<input type="text" ng-model="a+b" />
</p>
</div>
i will get the value addded but if i use the expression in the model how to get in the controller
and i am getting the error has ngModelSet is not a function
As soon as the user enters the value in two textbox the result of adding two text box should be shown in the 3rd textbox and there is a submit button which give the value to controller how to do it please help
use ng-change="my_operation()".
Dont put the js instructions inside the 'ng-change' because the $scope may be a children of the controller's and you will get display problem.
Write the function my_operation like this:
$scope.my_operation = function() {
$scope.c = $scope.a + $scope.b;
};
<input type="text" ng-model="my_operation()" value="{{ c }}" />
You need to specify variables in the ng-model directive, not expressions.
So, this is invalid: <input type="text" ng-model="a+b" />
Rather, do c = a + b somewhere and set ng-model="c".
<p>First Number:
<input type="text" ng-model="a" />
</p>
<p>Second Number:
<input type="text" ng-model="b" />
</p>
<p>Answer:{{a+b}}</p>
<div class="btn" ng-click=submitFnc(a+b) ng-disabled="!a||!b">Submit</div>
in the function
$scope.submitFnc = function(ans) {
$scope.ans = ans;
};
the previous answer by Pierre Emmanuel Lallemant is also Correct
but you requirement in the description is slight different try this one also.
Try this
<div ng-app="">
<p>First Number:</p>
<input type="text" ng-model="a" />
<p>Second Number: </p>
<input type="text" ng-model="b" />
<p>Final:</p>
<input type="text" value="{{ ans }}" />
<p>{{ans}}</p>
<button ng-click="finalResult()" class="btn-style">
</div>
In Controller
$scope.finalResult = function() {
$scope.ans = $scope.a + $scope.b;
};
I have a datetimepicker.
Overall, it works fine and updates the text box fine. However, when I place a ng-model onto the input field, nothing gets passed through to the binding at the bottom of the page.
Here!s the form I'm using :
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' ng-model="package.timeA" value="" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
This is my JS code :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
For the input box give some id or class name then initialize datepicker with that id or class
<input type='text' ng-model="package.timeA" value="" class="mydatePicker form-control" />
$('.mydatePicker ').datetimepicker();
It will work.
You can try to use $apply who allow to force reload of the variable and $setViewValue who allow to set the variable of the view.
add ng-change on your input tag and pass the date.
In your controller you can make a function like this:
$scope.onChange = function(package.timeA)
{
$scope.$apply(function (){
YourCtrl.$setViewValue(package.timeA)
}
}
In angular if i change my radio button from no to yes the span content should Hide.
I don't know how to take the event.
Here the fiddle
http://jsfiddle.net/Lzgqnkx9/
<div class="onoffswitch-green1">
<input type="radio" id="radios3" name="radiosgg" class="SwitchOn" value="true" checked
ng-click="radioChecked()">
<label for="radios3">Yes</label>
<input type="radio" id="radios4" name="radiosgg" class="SwitchOff" value="false" ng-
click="radiounChecked()">
<label for="radios4">No</label>
</div>
<span class="temsize">
<label>Team Size</label>
<input type="text" class="s-txtboxes">
</span>
your ans will be very helpfull .
Thanks
updated jsFiddle
Angular has an already defined behavior for handling radio inputs. You don't have to use any radioChecked function, just use combination of ng-model and value on your inputs :
<input type="radio"
ng-model="hasTeam"
value="true"/> - Yes
<input type="radio"
ng-model="hasTeam"
value="false"/> - No
<span ng-if="hasTeam">
I'm showing only if yes is selected.
</span>
Maybe you should read the docs here.
you must use ng-hide or ng-show directive
for example
HTML
<input type="radio" id="radios3" name="radiosgg" class="SwitchOn" value="true" checked
ng-click="radioChecked()" ng-model="myvar" ng-hide="hideVar">
JavaScript
$Scope.hideVar = false;
$Scope.myvar = false;
$Scope.radioChecked= function () {
$Scope.hideVar = true; // Hide your checkbox
... dosomething...
}
In my HTML page, I have two sets of Boolean based radio buttons: Labeled: "Yes" and "No" / Values: True and False respectively. I'm populating a full form from a PostgreSQL database table to allow the authenticated user to view the form with populated data and edit the populated fields including the radio buttons, then save the form which will save the data to the DB. All of the other text fields populate without issue; it's both collection of radio buttons I am having an issue with pre-checkmarking the radio buttons.
The below does not pre-populate the checked on front end (but adds the correct attribute of checked in HTML source):
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />
However, this does check the correct radio button on load:
<input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
<input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />
Note: I needed to check against the string boolean value in the directive ng-checked since the boolean value always comes back as a string from PostgreSQL. This, apparently, was a part of PostgreSQL's design when querying data from columns that have boolean data types.
When adding the ng-model directive, the radio button no longer is checked (at least in the rendered browser view). The odd part is that I looked at the source and it clearly checks the correct one. What's even more odd, is that I have to click on the radio button twice to 'check' it. I've tested this in latest version of Chrome, FF, and IE and it all results in the same issue.
The question is: when adding the ng-model directive, why would the HTML source add 'checked' in the radio button attribute, but seemingly does not mark the radio button? Furthermore, why would I have to click twice on the radio button that IS supposed to be checked?
Solution:
To fix this, I removed the ng-checked directive from the radio buttons and only used ng-model as suggested by #Cypher and #aet. I then replaced the attribute value with the directive ng-value "true" & "false". After, I set the values in the controller.
HTML
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />
Angular JS
app.controller('peopleCtrl', function($scope, peopleFactory){
...
peopleFactory.getPerson(personParams).then(function(data){
$scope.person = data;
/* moved from ng-checked */
$scope.person.billing = data.billing == 'true';
});
...
};
I think you should only use ng-model and should work well for you, here is the link to the official documentation of angular https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
The code from the example should not be difficult to adapt to your specific situation:
<script>
function Ctrl($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}
</script>
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/>
</form>
I solved my problem simply using ng-init for default selection instead of ng-checked
<div ng-init="person.billing=FALSE"></div>
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="FALSE" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="TRUE" />
[Personal Option]
Avoiding using $scope, based on John Papa Angular Style Guide
so my idea is take advantage of the current model:
(function(){
'use strict';
var app = angular.module('way', [])
app.controller('Decision', Decision);
Decision.$inject = [];
function Decision(){
var vm = this;
vm.checkItOut = _register;
function _register(newOption){
console.log('should I stay or should I go');
console.log(newOption);
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="way">
<div ng-controller="Decision as vm">
<form name="myCheckboxTest" ng-submit="vm.checkItOut(decision)">
<label class="radio-inline">
<input type="radio" name="option" ng-model="decision.myWay"
ng-value="false" ng-checked="!decision.myWay"> Should I stay?
</label>
<label class="radio-inline">
<input type="radio" name="option" ng-value="true"
ng-model="decision.myWay" > Should I go?
</label>
</form>
</div>
</div>
I hope I could help ;)
Please explain why same ng-model is used? And what value is passed through ng- model and how it is passed? To be more specific, if I use console.log(color) what would be the output?
can we change URL when radio button selected. I am using angularjs?
following is my code and I want to change url when input radiobox is selected
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">
Automatically
</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">
Manually
</label>
<span class="switch-selection">
</span>
</div>
In AngularJS, you can use the $location service to change path as:
$location.path('/new-route');
On your input tag, you can then use the ng-change or the ng-click directives to call a function that will change the route. So, it can be something like this:
<input type="radio" ng-click="changeLocation('route-name')>
With your controller having the following code:
$scope.changeLocation = function (newRoute) {
$location.path(newRoute);
};