I created a simple form which uses Angular JS for validation. The form has a Save and Modify button. If a user hits the modify button, it allows them to make changes to their inputs/fields. Another cool thing is that if something is actually modified, it will go ahead remain highlighted orange (so that a user knows which part of the form was modified) but if nothing is modified then there is no border once you go away from the field. My question/new requirement is the following:
If suppose I went on to the name field, for example, I change it and then decide to go back to what it was written originally, then theoritcally there should be no orange highlight remaining on the field. How do I make that happen? So if I change the field from A to B but then change it back to A, no border should be there because I ended up not changing the value. I have no idea how to do this. Any suggestions/guidance/tutorials that can help me solve this would be greatly appreciated. I have a snippet of my code below
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="angular.js#1.4.8"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
});
</script>
<style>
.someCSS {
border: 5px solid orange;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<form name="custForm">
Name:
<input id="name" ng-class="{someCSS: custForm.name.$dirty}" ng-model="someModel.name" />
<br> email:(change some value)
<input id="email2" name="email2" ng-class="{someCSS: custForm.email2.$dirty}" ng-model="someModel.email2" />
</form>
Touched:{{custForm.name.$touched}}
<br> dirty:{{custForm.email2.$dirty}}
<br>
</body>
We had a similar case - but even added an undo button. When populating the model for the first time, we stored a side-copy (use $angular.copy for a deep copy). Then when a field changed, the directive looked at the old value compared with the new value. E.G. <input ng-class="{highlight-orange:old.name !== new.name}" />
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.service('mySvc', function() {
this.getData = function() {
return { firstName:'Jack', lastName:'Sparrow' };
}
});
app.controller('myCtrl', function($scope, mySvc) {
$scope.old = mySvc.getData();
$scope.new = angular.copy($scope.old);
});
</script>
<style>
.different { color: red; }
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Name : <input type="text" ng-model="new.firstName" ng-class="{different:new.firstName !== old.firstName}"></p>
<h1>Hello {{(new.firstName === old.firstName) ? 'Good, old' : 'Happy, new'}} {{new.firstName}}</h1>
</div>
</body>
</html>
Copy the code above into a file then load it into your browser.
Related
I am starting to learn AngularJS and wanted to try building a simple calculator app, however, whenever I name the ng-app in my html-file, AngularJS stops working.
I tried building a controller, but seem to be doing something wrong when calling it or putting it to use.
I tried putting the files in the XAMPP webfolder because I thought it might not load from my hard drive, but to no avail.
(please disregard all the half-finished rest, right now I just want to get the controller working)
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<input type="number" ng-model="first" autofocus>
<input type="number" ng-model="second">
<br>
<button onClick="defineOperator('+')">+</button>
<button onClick="defineOperator('-')">-</button>
<button onClick="test()">TEST</button>
<br>
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
<script src="http://localhost/calculator/scripts/app.js" type="text/javascript"></script>
</body>
</html>
And the js:
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.defineOperator = function(choice) {
switch (operator) {
case +:
return first + second;
break;
default:
}
};
$scope.testOperator = function(click) {
alert("You chose " + operator);
};
});
Any help would be greatly appreciated.
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.first="hello";
});
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
Have a look at this. One thing you have not closed the tag in which angular is defined.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
You forgot to put > in above line.
Replace it with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
You forgot to end the script tag with >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
if you want to change the app-name in html page you should also change the app name in the js file :
angular.module('calculatorApp', [])
I have the following code in place
<input class="fill" name="keywords" ng-model="textbook.keywords"
type="text" ng-list="," ng-required="true"></input>
where textbook.keywords is an array of strings.
I expect the above code to create a text box filled with comma separated values of the array, textbook.keywords. Instead, the textbox is empty. I made sure textbook.keywords has values in it by debugging.
First: Please check whether the library properly added in index.html.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Second: Please check whether the ng-app is added properly in HTML:
<html ng-app="listApp">
Third: Please check whether the ng-controller is added properly in HTML:
<body ng-controller="ListCtrl">
Forth: The app.js should should contain the following minimum code:
var app = angular.module('listApp', []);
app.controller('ListCtrl', function($scope) {
$scope.textbook = {
keywords: ['Text1', 'Text2', 'Text3']
};
});
Fifth: Don't forget to add app.js in index.html
<script src="app.js"></script>
Final: The working code snippet is added here:
var app = angular.module('listApp', []);
app.controller('ListCtrl', function($scope) {
$scope.textbook = {
keywords: ['Text1', 'Text2', 'Text3']
};
});
<html ng-app="listApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ListCtrl">
<input class="fill" name="keywords" ng-model="textbook.keywords"
type="text" ng-list="," ng-required="true">
</body>
</html>
I am trying to validate my angular form with a number input. I have styled my number input ( which i have not included in my demo) so that i use stepUp() and stepDown() to increment and decrement values.
Here's my demo : http://plnkr.co/edit/9aBCTI6hcCM0HhHimVnL?p=preview
form.numbah.$valid and the number's ng-model doesn't change when i used stepUp()/stepDown() to increment/decrement values.
I want to validate form when there's a change in the number input.
Thanks in advance!
angular.module('plunker', [])
.controller('MainCtrl', function($scope, $document) {
$scope.numbah = -1;
$scope.stepup = function(){
document.getElementById("test-input").stepUp();
// $scope.numbah++;
};
$scope.stepdown = function(){
document.getElementById("test-input").stepDown();
// $scope.numbah--;
};
$scope.change = function (value){
alert(value);
};
});
/* Styles go here */
input[type=number]{
width: 40px;
}
div {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MainCtrl">
<form>
<p>Click stepdown/stepup buttons. You will see that form.numbah.$valid and numbah won't change</p>
<p>But, If you click spin buttons inside number input, then everything works fine</p>
<ng-form name="form">
<input id="test-input" name="numbah" type="number" ng-model="numbah" min="1" max="3" />
<div>form.numbah.$valid: {{form.numbah.$valid}}</div>
<div>Value of number : {{numbah}}</div>
<div>
<input type="button" ng-click="stepup()" value="stepup">
<input type="button" ng-click="stepdown()" value="stepdown">
</div>
<div>form.$valid : {{form.$valid}}</div>
</ng-form>
</form>
<script src="angular.js"></script>
<script src="script.js"></script>
</body>
</html>
Is there any way to change AngularJS urls with ng-model?
var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.controller('mainController', function($scope) {
$scope.gettext = function (){
};
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="eventChange.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<div class="row">
<div class="col-sm-1">Search</div>
<div class="col-sm-3"><input type="text" class="form-control" ng-model="search" ng-change="gettext()"></div>
</div>
</div>
</body>
</html>
I need to change the URL into something like this http://localhost/angulRoute/search=myVal when user type 'myVal' in the search box (actually inside gettext() function with search value)
You can do something like this in your controller:
$scope.query = $location.search().q;
$scope.$watch('query', function(newValue) {
$location.search('q', newValue);
});
You'd need to inject $location into your controller, and make sure in your route config includes:
reloadOnSearch: true
That would result in a URL like http://localhost/myRoute?q=myVal
Note: I would also add ng-model-options="{updateOn:'blur'}" to your input, to prevent updating the URL on every key press.
EXAMPLE
Here is a working example of how to do this: http://plnkr.co/edit/tphqPeJ0dO74Ux7WpXlU?p=preview
Note that, because of the way plnkr.co works, you won't see the URL changes in the address bar on that site. If you download the code and run it locally, the URL would be updated in the address bar.
Hi I found a javascript solution for that.
$scope.gettext = function (search){
window.history.pushState("object or string", "Title", "/angulRoute/search="+search);
};
with <input type="text" class="form-control" ng-model="search" ng-change="gettext(search)" > worked for me. However anyone have an AngulerJs solution they are welcome :D
Input field contains JSON data set from some other script.I have to access in controller.How can I access it in controller.Code I am using something like this-
<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
Enter first name: <input class="get" type="text" ng-model="student">
</div>
<script>
function studentController($scope) {
console.log($scope.student);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
With Angular, the controller is who tells the View what the default value should be (not the other way around). The View would reflect that, and could update it (with ng-model), but it is initially set by the controller.
So, the controller knows because the controller sets it up:
.controller("studentController", function($scope){
$scope.student = "default name";
});