noob on stack overflow here. I am working on a webpage that has a transfer job function. This lets the user check a check-box to send the job back to the office, or select a technician from a list of all that are available. My question is how to setup the check-box so that it is checked by default when the page loads and have the select list disabled accordingly. Here is the code that I have for it at the moment:
<div ng-app="">
Send to Office: <input type="checkbox" ng-model="checked" ng-checked="true"><br/>
<select id="transferTo" ng-disabled="checked">
<option>Tech1</option>
<option>Tech2</option>
</select>
</div>
and here is a jsfiddle for it: http://jsfiddle.net/hugmungus/LvHJw/5/
Currently, the page loads with the check-box checked, but the list is not disabled. If you un-check then re-check the it, the list becomes disabled.
Thanks for the help!
This question is related to
angularjs
checkbox
selectlist
If you use ng-model, you don't want to also use ng-checked. Instead just initialize the model variable to true. Normally you would do this in a controller that is managing your page (add one). In your fiddle I just did the initialization in an ng-init attribute for demonstration purposes.
<div ng-app="">
Send to Office: <input type="checkbox" ng-model="checked" ng-init="checked=true"><br/>
<select id="transferTo" ng-disabled="checked">
<option>Tech1</option>
<option>Tech2</option>
</select>
</div>
Do it in the controller
$timeout(function(){
$scope.checked = true;
}, 1);then remove ng-checked.
Do it in the controller ( controller as syntax below)
controller:
vm.question= {};
vm.question.active = true;
form
<input ng-model="vm.question.active" type="checkbox" id="active" name="active">
You don't really need the directive, can achieve it by using the ng-init and ng-checked. below demo link shows how to set the initial value for checkbox in angularjs.
<form>
<div>
Released<input type="checkbox" ng-model="Released" ng-bind-html="ACR.Released" ng-true-value="true" ng-false-value="false" ng-init='Released=true' ng-checked='true' />
Inactivated<input type="checkbox" ng-model="Inactivated" ng-bind-html="Inactivated" ng-true-value="true" ng-false-value="false" ng-init='Inactivated=false' ng-checked='false' />
Title Changed<input type="checkbox" ng-model="Title" ng-bind-html="Title" ng-true-value="true" ng-false-value="false" ng-init='Title=false' ng-checked='false' />
</div>
<br/>
<div>Released value is <b>{{Released}}</b></div>
<br/>
<div>Inactivated value is <b>{{Inactivated}}</b></div>
<br/>
<div>Title value is <b>{{Title}}</b></div>
<br/>
</form>
// Code goes here
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
});
Source: Stackoverflow.com