I have one drop down and a check box, i want to reset check box value to false whenever drop-down value change. I had already written code for reset check box value to false, but it is not working, please tell me where i am doing wrong.
View:
<label class="item item-input item-select">
<div class="input-label">Leave Type</div>
<select ng-model="LeaveRequest.leaveType" ng-change="leavetypechange(LeaveTypes)" required>
<option value="">Select Leave Type</option>
<option ng-repeat="lt in LeaveTypes"value="{{lt.Name}} ">{{lt.Name}}</option>
</select>
</label>
<div ng-show="ShowPeriod">
<ion-checkbox ng-model="isChecked" >Half day/ Quarter leave</ion-checkbox>
</div>
controller:
.controller('ApplyLeaveCtrl',function($scope, $state, $templateCache,$ionicPopup) {
$scope.leavetypechange=function(){
$scope.isChecked=false;
};
});
$scope.isChecked in loop is creating seperate scope for each item in dropdown.
so you need to put it in service.
.service('dataService', function() {
this.isChecked;
})
here is you working codepen:
http://codepen.io/anon/pen/MwzLqO
Use $parent with isChecked as follow:
<ion-checkbox ng-model="$parent.isChecked" >Half day/ Quarter leave</ion-checkbox>
Related
Using AngularJS, there is a requirement to show a dropdown with a selected value:
- When user selects a different value we should show a warning message and shouldn't proceed with update (save button disable).
- When user reverts to the original value, the message should hide and able to update (save button enable)
<select ng-model="vm.sldetails.AgencyGroupID" onchange=""
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="">Warning message</label>
Instead of calling an event in controller, can we achieve directly in Onchange event?
<div class="col-md-2">
<select class="form-control" ng-model="vm.sldetails.AgencyGroupID"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
</div>
HTML:
<label class="col-md-2 control-label text-align-left" id="lblWarningMessage" ng-if="vm.sldetails.AgencyGroupID==='your value'">Warning message</label>
In label tag,your value should be replaced by ur compare value
I guess you could try something like this:
<select ng-model="vm.sldetails.AgencyGroupID" ng-change="vm.selectChanged()"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="vm.showWarning">Warning message</label>
And in js:
vm.selectChanged = function(){
if(vm.sldetails.AgencyGroupID !== 'the initial value'){
vm.showWarning = true;
}else{
vm.showWarning = false;
}
}
Please see this relevant jsFiddle
Within the code I am trying to fire a method when a different option is selected to alert the user. However no event is being trigged
HTML:
<div ng-controller = "MyCtrl">
<p>Term</p>
<select id = "term" ng-change="test()">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
JS:
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
$scope.test = function () {
alert ("changed!");
}
}]);
You have some issues.
Firstly: <div ng-controller = "MyCtrl"> - you have spaces in between.
Secondly, you're not declaring your app with ng-app. This is because you set your fiddle as jquery, and not Angular. If you had set it as angular you wouldn't need this in the fiddle
This is your fiddle setup
This is an Angular fiddle setup
Thirdly, to use select with AngularJS, you need to have an ng-model on the select tag. In this case i just used bob
<div ng-app="HelloApp"> <!-- declare your angular app. typically would go on body or html -->
<div ng-controller="MyCtrl">
<p>Term</p>
<select ng-model="bob" ng-change="test()">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
</div>
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
console.log('ctrl working');
$scope.test = function () {
alert ("changed!");
}
}]);
Here is a working fiddle
http://jsfiddle.net/ctbLparv/
Also, if your intention is to just set a property based on the selection, you don't need to use ng-change. You can rely on the two-way binding.
So for example, this fiddle: http://jsfiddle.net/ps8jnyL8/
No select is being called. We also default the selected term to 10 when it first loads.
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<p>Term</p>
<select ng-init="selectedTerm = '10'" ng-model="selectedTerm">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<p>Selected Term: {{selectedTerm}}</p>
</div>
</div>
Here is the working JSFiddle:
https://jsfiddle.net/G8S32/1162/
The main change was adding this line:
ng-model="items"
which doesn't do anything except update the model and cause the event to fire.
Check out the documentation for ng-change:
https://docs.angularjs.org/api/ng/directive/ngChange
Particularly this line:
The ngChange expression is only evaluated when a change in the input
value causes a new value to be committed to the model.
I am using AngularJS 1.3.
In a form with 3 select boxes, from the choosen option of the first one i will show only south or only north select box.
In my try below i got erros like completely disappear the content below.
Wich will be the best way using angularjs to show only one of the two boxes ?
<select name="Type" ng-model="data.Type">
<option value="2">South</option>
<option value="3">North</option>
</select>
<div ng-if="data.Type==3">
<label class="item item-input item-select" >
<div class="input-label">North</div>
<select name="South" ng-model="data.South">
<option value="1">Dallas</option>
<option value="2">Miami</option>
</select>
</label>
</div>
<div ng-if="data.Type==2">
<label class="item item-input item-select" >
<div class="input-label">South</div>
<select name="North" ng-model="data.North">
<option value="1">New York</option>
<option value="2">Boston</option>
</select>
</label>
</div>
Works for me as-is with a very basic controller (see fiddle).
angular.module('app', [])
.controller('someController', function($scope) {
$scope.data = {}
});
The reason you only see one dropdown defaulted to blank is that there is not an initial value specified for the ng-model in this case data.Type. But it does work as in the 'North' and 'South' values are also there and selecting one of them causes the next dropdown to appear.
If you initialise data.Type to '2' in the controller then the dropdown will be defaulted to 'South' and one of the other dropdowns will appear.
You may also want to set initial values for data.North & data.South.
Fiddle with those updates
angular.module('app', [])
.controller('someController', function($scope) {
$scope.data = {
'Type' : 2,
'South' : 1,
'North' : 1
};
});
I have 2 drop down lists using ui-select2
<label class="control-label" for="MakeSelect">Make </label>
<select class="form-control col-md-2" id="MakeSelect" name="make" ui-select2
ng-model="carDetails.make">
<option ng-if="!carDetails.make" value="">[SELECT]</option>
<option ng-repeat="make in makes" value="{{ make }}">{{ make}}</option>
</select>
</div>
<div class="col-md-5">
<label class="control-label" for="ModelSelect">Model </label>
<select class="form-control col-md-2" id="ModelSelect" name="make" ui-select2
ng-model="carDetails.model">
<option ng-repeat="model in models" value="{{ model }}">{{ make}}</option>
</select>
After I choose a value in the drop down list "Makes" I am activating a watch that inside it I load the content of "Models" Dropdown lists.
Then, In order to refresh the drop down lists content in the GUI I call $scope.$digest() :
$scope.$watch('carDetails.make', function (make) {
console.log('selected make is: ' + make);
if (make == "") {
return;
}
Parse.Cloud.run('getCarModels', {'Make': make}, {
success: function (results) {
$scope.parseModels = results.resultSet;
$scope.models = results.distinctModels;
$scope.$digest();
},
error: function () {
console.log("Error: Failed to load models");
console.log(Parse.Error);
}
});
The problem is that with $digest the selected value of the first drop down list is becoming null and without it just doesn't refresh the view.
Any suggestions please?
They're both pointing to the same scope model, carDetails.make. So, of course, the first will become null, because the second drop down list sets carDetails.make to null. Also, I don't think you need to use digest, although, you should be using $scope.$apply. But, angularjs should run the digest anyway.
I have a problem to read the information selected that is propagate in a select.
<div ng-show="deviceDetail != null" ng-model="example" >
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption()">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
this is the HTML code and in the {{example}} I want to see the information that the user selected.
this is the part of the js releted:
$scope.selectOption = function() {
$scope.example = option.productName;
};
How I can fix it?
Thanks a million!
Set your example scope variable directly in <select> instead calling ng-change event and assigning into that function.
You can directly set option.name to example model with the use of ng-options too.
Here You have applied ng-model directive to div tag.
<div> is not input element so apply ng-model to <select> element here.
I would suggest to use ng-options directive for filling the selection list in <select>. ng-repeat is also fine.
Here you are binging ng-change event so in the function if requires then you can pass the object on which event is triggering so you can use that object or perform any operation on that.
Below is the modified template.
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="example" ng-options="option in deviceDetail" ng-change="selectOption(option)">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
You should to pass current option:
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption(option )">{{option}}</option>
</select>
$scope.selectOption = function(option) {
$scope.example = option; // is there property .productName?;
};
Try this:
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="option" ng-options="option in deviceDetail" ng-change="selectOption(option)">
{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
Js:
$scope.selectOption = function(option) {
$scope.example = option;
};
You should use ng-options
The value of the selection is: {{example}}