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>
Related
I am new to angularjs. I am trying a simple program which have check boxes and a disabled button. The button should be enabled after one or multiple checkboxes are selected. However, my solution seems to be not working. Any help in this respect will be great.
HTML code:
<html ng-app="Apps" ng-controller = "chk">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >
<label ng-repeat="lbl in lbls">
<input type="checkbox" ng-model="chkd" > {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="!chkd"/>
</div>
</center>
</body>
</html>
here is the JS is file:
var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){
$scope.lbls = [
'Apples',
'Bananas',
'Apricots',
'Peaches'
];
});
It looks like you have to have separate conditions for each of the checkboxes for ng-disabled to detect a change. Use this HTML layout instead:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div ng-app>
<input type="checkbox" ng-model="cb01"> Apples
<input type="checkbox" ng-model="cb02"> Bananas
<input type="checkbox" ng-model="cb03"> Apricots
<input type="checkbox" ng-model="cb04"> Peaches
<br>
<input type="button" value="Submit" ng-disabled="!(cb01||cb02||cb03||cb04)">
</div>
</center>
</body>
</html>
jsfiddle
EDIT
Code should now be working fine. Sorry for the confusion!
Here is an approach which you can insert other fruits, and don't need to change code in your ng-disabled:
var Apps = angular.module ('Apps', [])
Apps.controller("chk", function($scope){
$scope.chkd = {
Apples: false,
Bananas: false,
Apricots: false,
Peaches: false
};
$scope.enableSubmit = function(){
var atLeastOneSelected = [];
for (var fruit in $scope.chkd) {
if($scope.chkd[fruit] === true){
atLeastOneSelected.push(fruit);
}
}
return !(atLeastOneSelected.length > 0);
}
});
<html ng-app="Apps" ng-controller = "chk">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="Apps.js"></script>
</head>
<body>
<center>
<h1> Fruits </h1>
<hr/>
<div >
<label ng-repeat="(lbl, enabled) in chkd">
<input type="checkbox" ng-model="chkd[lbl]"> {{lbl}}
</label>
<br>
<input type="button" value="Submit" ng-disabled="enableSubmit()"/>
</div>
</center>
</body>
</html>
Hello guys i have some issue using date type and ng-model together. in my index.html i have the input field like this :
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
and my controller :
$scope.myExample = function() {
console.debug('date : ', $scope.myData.date);
}
in my console i get the log "date : undefined"
what seems to be the problem why i'm having undefined value? thanks
by the way im using "bootstrap-datepicker"
You have to init your myData object
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myData = {}; //Create the object
$scope.myExample = function() {
console.log('date : ', $scope.myData.date);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
</div>
Here is the required solution using bootstrap-datepicker
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myData = {}
$scope.myData.date = new Date();
$scope.myExample = function() {
console.debug('date : ', $scope.myData.date);
console.log('date : ', $scope.myData.date);
}
});
<html>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<body>
<script>
$('#date').datepicker()
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>
</div>
</body>
</html>
Please run the above snippet
HERE IS A WORKING DEMO
Another solution can be passing the date value through your function.
This is how I have achieved this.
CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample(myData.date)">Submit</button>
<script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.myExample = function(date) {
console.log(date);
alert(date);
}
})
</script>
</body>
</html>
You can also use date filter available in angularjs. See documentation here
https://docs.angularjs.org/api/ng/filter/date
For me it helped to insert a placeholder attribute into the input tag, whose value is e.g.:
placeholder="yyyy-MM-dd" (cause this works for me as well: placeholder="dd.MM.yyyy")
<input class="form-control" type="date" id="date" ng-model="myData.date" placeholder="dd.MM.yyyy" />
After that the ng-model processed it correctly and stored the value. In fact, in the documentation it is mentioned in the example https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
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">
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">
I have a simple AngularJS app with a single form that has 2 fields on it. I am trying to read the values entered in those 2 fields from my controller but for some reason I am always getting undefined. I have triple checked my code but can't find anything in it, so I hope someone can please help and tell me what I am doing wrong and how to fix it.
Note: I am using latest AngularJS release 1.2
app.js
'use strict';
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/index',
{ templateUrl: 'templates/common/index.html',
controller: 'IndexController'
}).
when('/editcontact',
{ templateUrl: 'templates/contacts/editContact.html',
controller: 'editContactController'
}).
otherwise({redirectTo: '/index'});
}]);
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
....
....
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/contacts/editContactController.js"></script>
</body>
</html>
editContact.html
<form name="editContactForm">
<div>
<fieldset>
<input id="name" type="text" placeholder=Name..." ng-modal="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">
</fieldset>
<button type="submit" ng-click="saveContact(contacts, editContactForm)">Save</button>
<button type="button" ng-click="cancelEdit()">Cancel</button>
</div>
</form>
editContactController
myApp.controller('editContactController',
function editContactController($scope){
$scope.saveContact = function(contacts, editContactForm){
if(editContactForm.$valid){
console.log(contacts.name);
}
};
});
You have a typo. ng-modal should be ng-model
<input id="name" type="text" placeholder=Name..." ng-modal="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-modal="contacts.phone">
should be
<input id="name" type="text" placeholder=Name..." ng-model="contacts.name">
<input id="phone" type="text" placeholder="Phone" ng-model="contacts.phone">