I am very new to angularjs, i will brief you out what i should achieve
there are three items in a web page,
(i) Checkbox
(ii) Textbox 1
(iii) Textbox 2
Textbox 1 is always read only with some text in it
on clicking the checkbox, textbox 2 should be editable which is intially readonly and has the text same as that in textbox 1
I have to do it in angularjs
please help
since you have the application and the controller, you can do:
Bind the checkbox to a variable doing: <input type="checkbox" ng-model="checked">;
Now your $scope have a property called checked. When the checkbox is checked, $scope.checked value will be true.
On your text fields write ng-readonly="checked";
Here you go:
HTML file:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyController">
<input type="checkbox" ng-model="myCheckbox" ng-change="cbSelected()" />
<input type="text" ng-model="text1" readonly />
<input type="text" ng-model="text2" ng-readonly="!myCheckbox" />
</body>
</html>
JS file:
'use strict';
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.text1 = 'some-text';
$scope.cbSelected = function() {
if ($scope.myCheckbox) { // when checked
$scope.text2 = angular.copy($scope.text1);
} else {
$scope.text2 = "";
}
};
});
See it working here: http://plnkr.co/edit/vURMjLxArLsRSKZj5o9q?p=preview
Ask question & read documentation if have any doubts.
Related
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.
If you look at this plunk, you see that if I change the model by using some function, the form doesn't get informed about it and it doesn't become dirty, how can I achieve this behavior?
$scope.obj = {};
$scope.setName = function() {
$scope.name = "set name !";
}
<form name="form">
<input type="text" ng-model="name" />
</form>
<button type="button" ng-click="setName()">
setName
</button>
<br />
{{form.$dirty}}
That's by design. The form becomes dirty is the user uses its control, not if the code modifies its underlying model.
But you can make the form (or a field of the form) dirty by using the form controller published in the scope by the form directive. In your case, since the form name is form, and assuming your input has a name:
<input type="text" name="name" ng-model="name" />
$scope.form.name.$setDirty()
have you tried somehting like:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "";
$scope.obj = {};
$scope.setName = function() {
$scope.name = "set name !";
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<input type="text" ng-model="name" required />
</form>
<button type="button" ng-click="setName()">
setName
</button>
<br />
{{form.$dirty}}
<br />
{{form.$touched}}
<br>
{{form.$invalid}}
</body>
</html>
add name attribute to your input element, here is the update plunker of yours
Using $scope.formName.filedName.$setDirty();
Can anyone tell me how can I do that please?
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form.one" ng-submit="submitForm()">
<input ng-model="name">
<input type="submit">
</form>
<p>Hello {{name}}!</p>
</body>
And my app.js is
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
var data = {};
$scope.submitForm = function() {
var data = form.one.name;
};
});
How can I save input to the data variable? Is it possible to save on keypress?
To use your form with Angular, there's a few modifications you need to make for this code to work: first, you need to add the novalidate attribute to your form; it is used to disable the browser's native form validation. Angular will use it's own validation. Here's a few other modifications (they're explained in detail here):
<body ng-controller="MainCtrl">
<form novalidate>
<input ng-model="name">
<!-- The method for submitting the data goes on the button. -->
<!-- The name is passed to the method you want to use to store the data, which you make happen when the button is clicked by using the ngClick directive. -->
<input type="submit" ng-click="submitForm(name)" value="Click me!">
</form>
<p>Hello {{name}}!</p>
<!-- This bit of code is to display the results of adding names to the array in the browser window: -->
<pre>{{ data }}</pre>
</body>
Here's the Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
// I put the data array in the $scope so it can be displayed in the browser window and you can see the results:
$scope.data = [];
// Now, whenever the button is clicked, this method is run.
// It then stores the name in the 'data' array defined above.
$scope.submitForm = function(name) {
$scope.data.push(name);
};
});
Try this for it to show straight after typing:
<body ng-controller="myApp">
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</body>
Javascript:
var myApp = angular.module('myApp',[]);
myApp.controller('myApp', function ($scope) {
$scope.name = $scope.name;
console.log($scope.name)
});
Small little JSFiddle for this:
https://jsfiddle.net/joshdmiller/HB7LU/
I'm trying to change a checkbox value based on another checkbox value, but the change doesn't seem to have any effect in the model.
Here is a code example of the issue:
http://plnkr.co/edit/eFOn3cejwKU01LkKNC1s?p=preview
HTML file
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<pre>
A value: {{a}}
B value: {{b}}
</pre>
A <input type="checkbox" ng-model="a" />
B <input type="checkbox" ng-model="b"
ng-disabled="a"
ng-checked="!a && b"
/>
</body>
</html>
And an empty controller:
var app = angular.module('main', [])
.controller('DemoCtrl', function($scope) {
});
As far as I've read, a Dom change doesn't change the model, and when I try to call $apply, the digest is already running, so I'm a bit lost.
I don't want to put a $watch on the first checkbox because my example is already quite complex.
Is there any alternative solution that does not involve writing js code in the controller for this problem?
Please see http://plnkr.co/edit/lbOWO4oLbTghactUETTD?p=preview
You missed reference to script
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
Here is a plunker showing a way to set the b value in the model to false when a is clicked and set to true, without modifying the controller.
http://plnkr.co/edit/rL6tTp5NfBzroZ2zSOgO?p=preview
And here is what I modified to do it - see the ng-change
A <input type="checkbox" ng-model="a" ng-change="b=!a" />
I have a table of objects with checkbox inputs. If an object's checkbox is checked, the object.isChecked value is set to true, and if it's unchecked then the value is set to false. However, I have a master checkbox that checks/unchecks all the checkboxes in the table. This does not update the object.isChecked values however. How would I make the master checkbox change the object.isChecked values?
The problem must be you trigger checkboxes not inside Angular. If you want Angular magic to work - you must do all your model manipulations inside Angular scope. I've created a plunker to demonstrate.:
index.html
<!DOCTYPE html>
<html data-ng-app="demo">
<head>
<script data-require="jquery#1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script data-require="angular.js#*" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="DemoController">
<div data-ng-repeat="object in objects">
{{object.name}}: <input type="checkbox" data-ng-model="object.isChecked">
</div>
Master: <input type="checkbox" data-ng-click="triggerAll()">
{{objects}}
</body>
</html>
script.js
"use strict";
var demo = angular.module("demo", []);
function DemoController($scope) {
$scope.objects = [
{
name : "First",
isChecked : true
},
{
name : "Second",
isChecked : false
}
]
$scope.triggerAll = function(){
angular.forEach($scope.objects, function(value){
value.isChecked = !value.isChecked;
})
}
}
Pay attention that triggering all checkboxes is done with ngClick, not with usual onClick or jQuery handler. This allows Angular to run dirty checks and behave correctly.