This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
Related
I would like to populate a pair of Yes or No radio buttons using angularjs.
I've a single value to do this from in $scope which is called x.employed.
x.employed has three possible values null, 'true' and 'false'.
How do I both make the Radio Button show the value from x.employed and then collect any subsequent change from the user.
<div class="container" ng-repeat="x in FormList" >
<div class="form-group">
<input type="radio" ng-value="x.employed" ng-model="new.employed" /> Yes
<input type="radio" ng-value="x.employed" ng-model="new.employed" /> No
</div>
I've also tried ng-checked but as i understand it cant be used with ng-model. This has me completely confused can anyone throw some light on how i'd go about doing this please?
You have a couple of issues. First, value (or ng-value) needs to be set to the value associated with the button, Yes or No. Second, ng-model should be set to the property in your object.
var app = angular.module('sample', []);
app.controller('MainCtrl', function($scope) {
$scope.FormList = [{
employed: 'true'
}, {
employed: 'false'
}, {
employed: null
}];
});
<html ng-app="sample">
<head>
<meta charset="utf-8" />
<title>AngularJS Sample</title>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container" ng-repeat="x in FormList">
<div class="form-group">
<input type="radio" ng-value="'true'" ng-model="x.employed" /> Yes
<input type="radio" ng-value="'false'" ng-model="x.employed" /> No
</div>
</div>
</body>
</html>
I have tried that, if i check the check box then radio button will also get selected. Its going good when i check the check box.
But, If i select the radio button binding process is not happening. i.e, If i click the radio button ,the check box has to be checked.
I dont know how to do this?
Herewith placed the code.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-model="checked">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked">Yeah :)
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= 0;
}]);
</script>
</body>
</html>
Can anyone please help on this?
Try this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
}]);
</script>
<body ng-app="sampleApp">
<div ng-controller="sampleController" ng-init="checked='false'">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-click="checked = !checked">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked" ng-click="checked = !checked">Yeah :)
</div>
You could do something like this,it will definitely work
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="slave" ng-model="checked">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked" ng-click="slave=true">Yeah :)
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= false;
$scope.slave=false;
}]);
</script>
</body>
</html>
I have introduced another variable which will change on click of the radio button,because the event which gets triggered from the radio button is not the check event rather it is the onclick event.
Try this, Its worked fine..!
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-click="toggleSwitch()">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked" ng-click="toggleSwitch()">Yeah :)
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= false;
$scope.toggleSwitch=function(){
$scope.checked= !$scope.checked;
}
}]);
</script>
</body>
</html>
</html>
Here you did not specify the two way binding directive i.e ng-model for radio button.
<input id="checkSlave" type="radio" ng-checked="checked" ng-model="checked">Yeah :)
I have a basic addition calculator that looks like this:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
</script>
</head>
<body>
<input type="number" ng-model="input1" /> + <input type="number" ng-model="input2" /> = <input type="number" ng-model="input1 + input2" />
</body>
</html>
Which looks like this:
2 + 3 = 5
I now have a requirement to make the third input editable and when changed it changes the value in the first input so that the numbers add up. So in the above example, supposing I change 5 to 6 it will look like this:
3 + 3 = 6
But because the model of the third input is a calculation I can't edit it. Please can someone advise how can I make it so that all three inputs are editable and yet still perform the required calculation?
You will need to respond to the ng-change event of the inputs on a controller
<html ng-app="app">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js">
</script>
</head>
<body ng-controller="ctrl">
<input type="number" ng-model="input1" ng-change="calc()"/> + <input type="number" ng-model="input2" ng-change="calc()"/> = <input type="number" ng-model="result" ng-change="recalc()" />
</body>
<script type="text/javascript">
angular.module('app',[]).controller('ctrl',function($scope){
$scope.recalc = function(){
$scope.input1 = $scope.result - $scope.input2;
};
$scope.calc = function(){
$scope.result = $scope.input1 + $scope.input2;
}
});
</script>
</html>
Another approach :D
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
</script>
</head>
<body>
<input type="number" ng-model="input1" ng-change="answ1=input1+input2" /> +
<input type="number" ng-model="input2" ng-change="answ1=input1+input2" /> =
<input type="number" ng-model="answ1" ng-change="input1=answ1-input2" />
</body>
</html>
When edited any of the boxes it reflect the change...
I try to make disable second field until I do not enter 'Lokesh' in first field for that I have tried below code I am in learning stage of angularjs so please correct me where I am doing mistake.
eg.code
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<p>Enter 'Lokesh' to display last name</p>
<div ng-app="myApp" ng-controller="myCtrl">
<input data-ng-model="firstName"
type="text"
ng-disabled="{if(firstName="lokesh")}"
Last Name: <input type="text" ng-model="lastName"><br>
/>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName= "Kumar Gaurav";
});
</script>
</body>
The problem is with the attribute ng-disabled="{if(firstName=" lokesh ")}"
There is no need of using if, you can directly compare the strings.
Update the code as
ng-disabled="firstName=='lokesh'"
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app>
<input data-ng-model="firstName" class="span12 editEmail" type="text" placeholder="Type lokesh here" />Last Name:
<input type="text" ng-model="lastName" ng-disabled="firstName!=='lokesh'" />
<br>{{firstName}}
</div>
I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<title>Testing jQuery on Forms</title>
</head>
<body>
<div id="form">
<h3>The form</h3>
<form name="main_form">
<fieldset style="width: 300px;">
<legend>General Information</legend>
<p>Do you have a name?</p>
<input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
<legend for="name_or_yes">Yes</legend>
<input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
<legend for="name_or_no">No</legend>
<br/>
Name: <input type="text" name="name" id="#name_field">
</fieldset>
</form>
<button id="submit_form">Submit</button>
</div>
<div id="results"></div>
</body>
</html>
Here is the JS:
$(document).ready(function() {
$('#name_or_yes').click(function() {
$('input[name=name]').focus();
});
$('#submit_form').click(function() {
var toAdd = $("input[name=name]").val();
$('#results').append("<p>"+toAdd+"</p>");
});
});
I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfocus").focus();
});
</script>
</head>
<body>
<input type="text" id="txtfocus2"><br/>
This text box is set focused: <input type="text" id="txtfocus">
</body>
</html>
Any help or advice is appreciated!
Look at the id here:
<input type="text" name="name" id="#name_field">
Try it like this:
<input type="text" name="name" id="name_field">
The # is the id selector, but should not appear in the HTML.
Thank you both!
These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!
I would like to upvote you however, I do not have sufficient reputation points to do so. :(
input's ID should be "name_field" instead of "#name_field":
<input type="text" name="name" id="name_field">