I am trying to show and hide one of two select options based on an expression
but it doesn't work well. How can I make it work? Thanks in advance.
<div class="col-md-3">
<div class="form-group has-error " ng-switch on="class">
<label class="title_lable">{{class}}</label>
<select class="form-control input-sm" ng-model="Tclass">
<option ng-switch-when="7" ng-repeat="sd in ScientificDegree" value="{{sd.sub_cod}}">{{sd.Degree}}</option>
<option ng-switch-when="8" ng-repeat="sp in Specialty" value="{{sp.Spec_Key}}">{{sp.Spec}}</option>
</select>
</div>
</div>
Would be better if you include the controller's content in your question, but I tried to complete an example based on some assumptions. Your ng-switch looks good, so I think something is wrong in the controller. This is what I put in the controller to get it working:
app.controller('MainCtrl', function($scope) {
$scope.ScientificDegree = [{sub_cod:1,Degree:'Degree 1'}];
$scope.Specialty = [{Spec_Key: 2, Spec: 'Specialty 2'}];
$scope.TClass = '';
$scope.class = 8;
});
Here's a plunker to see it working https://plnkr.co/edit/TjE2MvrHLfdI1umajtBx?p=preview
Related
here is the code, i am trying to use two ngChanges, is it correct or any alternative way.
<select ng-change="updatedate()" ng-change="checkDate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
</select>
Thanks,
Jameer
Call both the methods in single ng-change like this.
<select ng-change="updatedate(); checkDate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options> </select>
Don't use 2 ng-change. Just seperate the functions with a ;
ng-change="updatedate(); checkDate();"
use multiple operations in one ng-change and separate them by ; like
ng-change="updatedate();checkDate();"
<select ng-change="updatedate();checkDate();" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
</select>
There is no code error if we call two ng-change in same element like you configured :
<select ng-change="updatedate()" ng-change="checkDate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
</select>
The problem is only it will not solve your purpose I mean you want to execute both function updatedate() checkDate() on change. It will only call first function you configured.
Now if you want to execute both function you will need to call both function with ';' separated in same ng-change.
You can check the difference in running example.
<!DOCTYPE html>
<html>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Write something in the input field:</p>
<input type="text" ng-change="myFunc()" ng-change="myFunc1()" ng-model="myValue" />
<p>two ng-change called for two function. value of count is {{count}} times.</p>
</div>
<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc();myFunc1()" ng-model="myValue" />
<p>Two function call in one ng-change. value of count is {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
console.log('inc'+$scope.count);
};
$scope.myFunc1 = function() {
$scope.count--;
console.log('dec'+$scope.count);
};
}]);
</script>
</body>
</html>
I have a form with some md-select dropdowns which im trying to bind with a scope object in my angular controller.
The html looks like that :
<div id="horizontal_form_category" class="row">
<div class="col-md-2 col-lg-2" data-ng-repeat="r in categories[general]" dir="rtl">
<md-input-container>
<label> {{ r.name }} </label>
<md-select ng-model="formObject[r.name]" class="md-no-underline">
<md-option ng-repeat="option in r.values" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
</div>
The controller has a definition of the object $scope.formObject = {}; (Although it should work without it)
But, unfortunately, the $scope.formObject object in my controller stays empty.
Any ideas what could cause such weird behavior ? I have some normal bootstrap components whom ng-model is written the same and are working just fine.
Thanks
Does this help in any way? - CodePen
The true as the last parameter for $watch checks for changes in the object formObject.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-input-container>
<label> Options </label>
<md-select ng-model="formObject['Options']" class="md-no-underline">
<md-option ng-repeat="option in options" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
JS
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.options = ["Earth", "Saturn", "Jupiter"];
$scope.$watch("formObject", function () {
console.log($scope.formObject);
}, true)
});
Apparently there wasnt any bug.
My form's md-select were empty and therefore the formObject was empty.
The minute I started puting values, the formObject got filled, one field at a time, containing only the fields that were set.
I added a default value and everything is now showing correctly, just to be sure this was the "bug".
In retrospect, this bevahiour actually saves me some lines of code so I adopted it :)
Gotta thank #camden_kid answer for the $watch tip, helped me figure it out in matter of seconds.
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.
Please see jsFiddle
In this simple example here I want to set the checkbox value to true or '1' using a controller. I also want to keep a variable called $scope.button within the controller that is tied to the checkbox using ng-model.
However I am unable to set the checkbox value to true or 1 using $scope.button = 1
<div ng-app="App">
<div ng-controller="MyCtrl">
<input ng-model="$scope.button" ng-true-value="1" ng-false-value="0" type="checkbox"/>
</div>
</div>
Angular code
var app = angular.module('App', [])
app.controller('MyCtrl', function($scope) {
$scope.button = 1;
});
Use this:
<div ng-app="App">
<div ng-controller="MyCtrl">
<input ng-model="button" type="checkbox"/>
<span ng-bind="button"></span>
</div>
</div>
I've removed $scope from the ng-model attribute as this doesn't belong there. It's already being bound to the scope.
Working fiddle: http://jsfiddle.net/4bdkkenp/3/
I have a following question for AngularJS. I have a
select with options created with ngOptions. I want to
set selected option back to default option. I tried to
delete model variable e.g:
if(angular.isDefined($scope.first)){
delete $scope.first;
}
But this not working. Here is my html.
<div ng-app="app">
<div ng-controller="testCtrl">
<select data-ng-model="first" data-ng-options="item.name for item in selectContent" required="required">
<option value="" style="display: none;">-- select --</option>
</select>
{{first.value}}
<hr/>
<input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
</div>
</div>
And here is my JavaScript code:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.selectContent = [
{
name: "first",
value: "1"
},
{
name: "second",
value: "2"
}
];
$scope.resetDropDown = function() {
if(angular.isDefined($scope.first)){
delete $scope.first;
}
}
});
Here is working jsfiddle:
http://jsfiddle.net/zono/rzJ2w/
How I can solve this problem?
Best regards.
Your reset-button is placed outside of the div containing your controller. This means that your reset-function does not exist in the context where you try to use it.
Change to:
<div ng-app="app">
<div ng-controller="testCtrl">
<select data-ng-model="first" data-ng-options="item.name for item in selectContent" required="required">
<option value="" style="display: none;">-- select --</option>
</select>
{{first.value}}
<hr/>
<input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
</div>
</div>
It's always a good idea to use a debugger to make sure the code you're trying to fix is actually being executed.
$scope.resetDropDown = function() {
$scope.first = "";
}
Solution above works for Windows and Android, but did not work for iOS browsers. Probably events are happening in different order there.
So for my code I:
created ID for select element, so I could easily find it by
iQuery;
created delayed invocation of to statements to ensure the
reset is happenning at the very end;
and just in case was
resetting in two ways (but just first way was actually enough in iOS
too);
function resetDropDown () {
$timeout(function(){
$scope.first = '';
// jQuery way
$('select#idOfSelectElement option:first' ).prop( 'selected', true );
}, 200);
}