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.
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.
Previously there was a <div>, the contents of which i was toggling on ng-click. With components in Angular 1.5, i moved the contents of the <div>and created a component. I want to load this component on ng-click now.
Is this possible ?
I did not find any help yet. If possible, a help would be great.
Its possible to show/hide the component (having your div content). I have created a plnkr, refer the below code and plnkr link
https://plnkr.co/edit/sZSfslXTDGfvGwiDdBSZ?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="componentApp">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="componentController">
<button ng-click="showComponent()" id="changeText">Show Component</button>
<div-content ng-if="isShowContent"></div-content>
</body>
</html>
JS:
angular.module("componentApp", [])
.controller("componentController", function($scope) {
$scope.isShowContent = false;
$scope.showComponent = function() {
$scope.isShowContent = !$scope.isShowContent;
document.getElementById("changeText").innerHTML = $scope.isShowContent ? "Hide Component" : "Show Component";
};
})
.component("divContent", {
template: "This is the content of my div"
});
I am using an javascript object as model for select menu, and ng-options also have object as the value property. I want the select menu to be pre-selected based on the model value.
My html code,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="myApp" data-ng-controller="MyCtrl as vm">
<select data-ng-model="vm.model" data-ng-options="option as option.studentName for option in vm.options"></select>
<br>
<div>Model : {{vm.model}}</div>
<br>
<div>Options :<br>[ <div data-ng-repeat='option in vm.options'>{{option}}</div></div>
]
</body>
</html>
Script,
// Code goes here
angular.module('myApp',[]);
angular.module('myApp').
controller('MyCtrl',MyCtrl);
function MyCtrl(){
var vm = this;
vm.model = {studentId:1,studentName:'Dheepan'};
vm.options = [{studentId:1,studentName:'Dheepan'},
{studentId:2,studentName:'Raju'}
];
}
Plunker here.
I can understand that since ng-model and option are having different reference, it is not getting selected by default. Is there any way to do it?
You can to use track by to define with field will be finded:
<select data-ng-model="vm.model"
data-ng-options="option as option.studentName for option in vm.options track by option.id"></select>
(your updated jsfiddle: http://embed.plnkr.co/6zNpJA4AsY50bpOQwnLl/preview)
You have to use option.studentId as option.studentName to bind studentId for selected studentName.
here is updated plunker
Try this :
<select data-ng-model="vm.model" data-ng-change="vm.changeStudent(vm.model)" data-ng-options="option.studentId as option.studentName for option in vm.options"></select>
I added ng-change to bind value and display on page.
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.
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" />