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" />
Related
Is there any way for Angular to take the string from the date/time inputs? Currently, I have this input, for example:
<input class="admin-input" type="time" ng-model="newEvent.endHour"/>
I'd like to show the value in model as HH:mm but, when I print its value, it shows the full date plus the full time. Is there anyway to get just the string shown in the input (HH:mm format) into the ng-model?
Thanks in advance.
You can use the angular date filter,
<input class="admin-input" type="time" ng-model="newEvent.endHour | date:'HH:mm'"/>
EDIT
If you want to bind it to a model then add a watch and filter it inside the controller,
DEMO
var app = angular.module('App', []);
app.controller('myctrl', function($scope,$filter) {
$scope.endHour = new Date();
$scope.$watch('endHour', function(newValue) {
$scope.endHour = $filter('date')(newValue, 'HH:mm');
});
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="//code.angularjs.org/1.2.14/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div ng-app="App" ng-controller="myctrl">
<input type="datetime" ng-model="endHour" class="form-control" />
</div>
</body>
</html>
So, what I am trying to do is to make a few checkboxes on a page. The idea is that if I check a checkbox and then save the info in Mongo db, then reload the page, then the checkbox I checked earlier should stay checked on reload.
Let me make this Plnkr
If the plnk doesnt load, Let me enter the code as well.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js" data-semver="2.0.0-alpha.45" data-require="angular.js#*"></script>
<script src="app.js" data-semver="2.0.0-alpha.45" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="main">
<label>Test checkbox</label>
<input type="checkbox" id="" ng-model="test.checkbox" value="test" name="testCheckbox" ng-checked="">
<br />{{ greeting }}
</body>
</html>
Please check and let me know a solution, guys!
TIA.
You may need to use localStorage in HTML5.
Below will help you -
keep checkboxes checked after page refresh
You need to get data from Monogo onload
OR
you can use localStorage
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
Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.
<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />
Total {{field1*50--field2}}
http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview
You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
testing
<input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
<input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
<br />
Total {{field1*50--field2}}
</body>
</html>
So really, you should do this:
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
function init() {
$scope.field1 = 0;
$scope.field2 = 0;
}
init();
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
testing
<input type="text" id="field1" ng-model="field1" />
<input type="text" id="field2" ng-model="field2" />
<br />Total {{ field1 * 50 - -field2}}
</div>
</body>
</html>
You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.
That's enough to have a default value for the fields
Here is the working plunker of your code,
http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview
Hope this helps!!!!
i have routeProvider, ng-view and controller.
Simple template with form and input. I can see $dirty value in {{form.var1.$dirty}} - it changes when i type, but how to access it in the controller code?
html main
<!doctype html>
<html ng-app="project">
<head>
<meta charset="utf-8">
<title>Tabs</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/dirty.js"></script>
<!--<script src="js/tab.js"></script>-->
</head><body>
<div ng-view>
</div>
</body>
</html>
template
{{2+2}}<br>
|{{var1}}|<br>
|{{form.var1.$dirty}}|
check dirty
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<input id="var1" name="var1" class="input" type="text" ng-model="var1">
</form>
js
angular.module('project',[]).
config(function($routeProvider) {
$routeProvider.
when('/', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
when('/tab1', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
otherwise({redirectTo:'/'});
});
function Ctrl1($scope,$rootScope) {
$scope.var1=100;
$scope.dodo1 = function() {
alert(form.var1.$dirty);
}
}
Alert shows me "undefined".
How to get var1 $dirty value?
As Cherniv told you in the comments you need to access the variable from the $scope object
$scope.form.var1.$dirty