On a Foundation-for-Apps web application, I want to trigger a function in my controller when a select value is changed.
I did the following in my template:
---
name: meeting-rooms
url: /meeting-rooms
controller: MeetingRoomsCtrl
animationIn: slideInRight
animationOut: slideOutLeft
---
<div class="custom-tabs" zf-tabs="">
<div class="custom-tabs-item" zf-tab="" title="Location" data-options="one_up: false">
<form class="form">
<select id="selectLocation" class="select form-place-select" ng-model="selectLocation" ng-change="selectLocationChanged()">
<option value="">Select a place</option>
<option value="New York">New York</option>
</select>
</form>
</div>
</div>
And my controller:
(function() {
'use strict';
angular.module('application').controller('MeetingRoomsCtrl', ['$scope',
function($scope, $state, $window, foundation, ModalFactory, NotificationFactory) {
$scope.selectLocationChanged = function() {
console.log($scope.selectLocation.name);
};
}
]);
})();
Which is supposed to work: the ng-model is provided, the function selectLocationChanged exist in the scope (I can use other variables set in the controller in the same template), and the syntax ng-model="selectLocation" ng-change="selectLocationChanged()" is correct. I don't have any error message in the console, the change event is just not fired.
Is there any reason why this is not working? Maybe something specific with Foundation For Apps?
Change your code to this, forgot to include controller in HTML page
<form class="form" ng-controller="MeetingRoomsCtrl">
<div >
<select id="selectLocation" class="select form-place-select" ng-model="selectLocation" ng-change="selectLocationChanged(selectLocation)">
<option value="" disabled="disabled">Select a place</option>
<option value="New York">New York</option>
</select>
</div>
</form>
Related
I didn't found some code that can help me among all answers about the subject.
My level in AngularJS is 0 so I don't understand the code too ^^
It's not my code : I have to debug/correct it :
I have a ng-repeat and a button to add a div as many times I want.
The initial div selected by default the first "Act" and the additionnal div has the first choice
<option value="">Select</option> selected and that's what I want.
<div ng-repeat="item in vm.ListActs track by $index">
<fieldset>
<legend>Act {{$index + 1}}<i class="icon-close" ng-click="vm.DeleteAct($index)" ng-hide="$index === 0"></i></legend>
<br />
<div class="field selectField">
<label for="selectgroupAct{{$index}}">
TO <span class="obligatoire">*</span>
</label>
<select id="selectgroupAct{{$index}}"
name="selectgroupAct{{$index}}"
ng-options="act.Code as acte.Code for acte in vm.ListActsTO.Acts"
ng-disabled="vm.ListActsTO.Acts.length === 1"
ng-model="item.Code"
ng-change="vm.ActIndexChange($index, item.Code)"
required >
<option value="">Select</option>
</select>
</div>
</fieldset>
</div>
Do you know why the initial select doesn't want to have the <option value="">Select</option> as the selected option ?
In the js I have this code:
(function () {
'use strict';
angular
.module('SpaApp')
.controller('myController', myController);
myController.$inject = ['firstService', 'secondService', '$localStorage', '$location'];
function myController(firstService, secondService, $localStorage, $location) {
var $ctrl = this;
angular.extend($ctrl, {
...methods declared
});
init();
return $ctrl;
function init() {
angular.extend($ctrl, {
ListActsTO: {},
ListActs : []
});
getListActsTO();
$ctrl.ListActs [0] = {
Code: ""
};
}
...
I tried to add property selected in my option <option value="">Select</option> but it didn't work. I tried with https://docs.angularjs.org/api/ng/directive/select but I'm not good enough and after applying one, the other functionnalities I have didn't work anymore.
Thank you for your help
The ng-model is the key here. It says 'item.Code is the variable being tracked in this form element'.
<select id="selectgroupAct{{$index}}"
...
ng-model="item.Code"
...
required >
That said, in your controller, you can simply initialize this variable to match the value, in this case an empty string.
function myController(firstService, secondService, $localStorage, $location) {
var $ctrl = this;
$ctrl.item = {Code: ""}
.....
(assuming you don't have other empty string values in your vm.ListActsTO.Acts array)
My current code:
<select ng-model="user.userType" ng-required="true" class="form-control">
<option value="pharmacist">Pharmacist</option>
<option value="chief_pharmacist">Chief Pharmacist</option>
<option value="doctor">Doctor</option>
</select>
//sample code
I need 3 user types to be in the select menu and to pass the selected value to the database.
This might help you, I have listed two ways to achieve this, also have mentioned what value you should pass (I prefer passing id rather than name):
Plnkr
You need to use an angular controller with your view, like this.
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope){
$scope.user = {};
$scope.registerUser = function(){
alert($scope.user.userType);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
<select ng-model="user.userType" ng-required="true" class="form-control">
<option value="pharmacist">Pharmacist</option>
<option value="chief_pharmacist">Chief Pharmacist</option>
<option value="doctor">Doctor</option>
</select>
<button ng-click="registerUser()">register</button>
</div>
</div>
Here is a simple Select done in Angular
<select ng-model="myCar">
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
I have the following in my scope in angular.js
$scope.cars = ["Toyota", "Ford", "Rolls"];
why isn't the options showing up, instead I get {{car}}
You can try this.
<select ng-model="myCar" ng-options = "car for car in cars" ng-init="myCar = 'Rolls'">
</select>
or this
<select ng-model="myCar" ng-init="myCar = 'Rolls'">
<option ng-repeat="car in cars" value={{car}}>{{car}}</option>
</select>
Your's code is working fine. Only the default value isn't selected, so at the beginning it shows blank.
Refer here.
HTML:
<div ng-app="app" ng-controller="test">
<select ng-model="myCar">
<option value="">Select</option>
<option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.cars = ["Toyota", "Ford", "Rolls"];
});
Now I am trying to get the value from select dropdown, but it return undefined. The thing is in html level it works as expect, Here is my code:
<div class='subcontent'>
<input id="me" type="radio" class='choosemethod' ng-model="paymentmethod" value="Y"><label for="me" class='choosemethod'>Me</label>
<input id="company" type="radio" ng-model="paymentmethod" value="N" class='choosemethod'><label for="company" class='choosemethod'>My Company</label><br/>
<span class='helptext'>Who makes payments to this account?</span><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span>
</div>
<div class='paymentmethods subcontent' ng-switch on="paymentmethod">
<select ng-model='selectedmethod' ng-init="selectedmethod=Memethods[0]" id='methods' ng-switch-when='Y'>
<option ng-repeat="method in Memethods" value="{{method}}">{{method}}</option>
</select>
<select ng-model='selectedmethod' ng-init="selectedmethod=companies[0]" ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in companies' value="{{companyoption}}">{{companyoption}}</option>
</select>
<div class='clear'></div>
<label for ='methods'>Payment Method</label><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span>
</div>
In js:
$scope.Memethods = ['Same as Card/Account Name','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','VISA'];
$scope.companies = ['Company Paid','MyAMEX'];
it shows fine in page, but when I try to get the value, it shows undefined. any idea?
This is the classic "angular dot notation" issue.
Here is a working example
Basically, ng-switch creates a new scope, so when the select sets the selectedmethod property, it is doing so on the new scope, not the controller scope as you are expecting. One solution is to create a parent object for your model.
angular.module('app',[])
.controller('main', function($scope){
$scope.selection = {};
$scope.Memethods = ['Same as Card/Account Name','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','VISA'];
$scope.companies = ['Company Paid','MyAMEX'];
})
and note how it's referenced differently in the html:
<select ng-model='selection.selectedmethod' ng-init="selection.selectedmethod=companies[0]" ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in companies' value="{{companyoption}}">{{companyoption}}</option>
</select>
A different (maybe better) way would be to use the "ControllerAs" syntax, which has the effect of doing this for you.
angular.module('app',[])
.controller('main', function($scope){
this.Memethods = ['Same as Card/Account Name','American Express','American Express Corp','Cash','Checking','MasterCard','My Visa','VISA'];
this.companies = ['Company Paid','MyAMEX'];
})
<body ng-app="app" ng-controller="main as main">
<div class='subcontent'>
<input id="me" type="radio" class='choosemethod' ng-model="paymentmethod" value="Y">
<label for="me" class='choosemethod'>Me</label>
<input id="company" type="radio" ng-model="paymentmethod" value="N" class='choosemethod'>
<label for="company" class='choosemethod'>My Company</label>
<br/>
<span class='helptext'>Who makes payments to this account?</span><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span>
</div>
<div class='paymentmethods subcontent' ng-switch on="paymentmethod">
<select ng-model='main.selectedmethod' ng-init="main.selectedmethod=main.Memethods[0]" id='methods' ng-switch-when='Y'>
<option ng-repeat="method in main.Memethods" value="{{method}}">{{method}}</option>
</select>
<select ng-model='main.selectedmethod' ng-init="main.selectedmethod=main.companies[0]" ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in main.companies' value="{{companyoption}}">{{companyoption}}</option>
</select>
<div class='clear'></div>
<label for='methods'>Payment Method</label><span class='help' style='margin-left:20px;width:20px;height:20px;'>help</span>
</div>
<div>{{main.selectedmethod}}</div>
</body>
you can refer to this simple example
html code :
<div ng-controller="Main" ng-app>
<div>selections = {{selections}}</div>
<div>
<p>Model doesn't get updated when selecting:</p>
<select ng-repeat="selection in selections" ng-model="selection" ng-options="i.id as i.name for i in items">
<option value=""></option>
</select>
</div>
js code:
function Main($scope) {
$scope.selections = ["", "id-2", ""];
$scope.reset = function() {
$scope.selections = ["", "", ""];
};
$scope.sample = function() {
$scope.selections = [ "id-1", "id-2", "id-3" ];
}
$scope.items = [{
id: 'id-1',
name: 'Name 1'},
{
id: 'id-2',
name: 'Name 2'},
{
id: 'id-3',
name: 'Name 3'}];
}
The ng-model inside value must have Initialize before it represents. So the ng-init comes before the ng-model. inside the options $first is used for select the first value.
<select ng-init= "selectedmethod=companies[0]" ng-model='selectedmethod' ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in companies' value="{{companyoption}}" ng-selected="$first">{{companyoption}}
</option>
</select>
I have problem with angular modal value.
I have $rootScope and on button im opening modal which contains , and I can't set default / selected value to that
<form>
<input type="button" class="mobileUpdate" ng-click="openMobileUpdateModal()" />
<script type="text/ng-template" id="mobileModal.html">
<form name="modalForm">
<div class="modal-body">
<p>Country</p>
<select id="countryMobile" ng-model="countryMobile" class="select-styled" name="countryMobile" required>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" ng-click='confirm()' value="OK"/>
<input type="button" ng-click='cancel()' value="Cancel"/>
</div>
</form>
</script>
</form>
$rootScope.openMobileUpdateModal = function () {
$rootScope.countryMobile = $rootScope.country;
var modalInstance = $modal.open({
templateUrl: 'mobileModal.html',
controller: ModalInstanceCtrl
});
};
var ModalInstanceCtrl = function ($rootScope, $modalInstance) {
$rootScope.confirm = function () {
//do something
$modalInstance.close();
};
$rootScope.cancel = function () {
$modalInstance.dismiss();
};
};
Anyone know how to send value from $rootScope to modal, and set that value as default?
Thanks
First of all there is syntax error you have double quote twise in you select tag code. Update it as below then try. And use $root in your ng-model.
<select id="countryMobile" ng-model="$root.countryMobile" class="select-styled" name="countryMobile" required>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
I'm not sure that I understand your problem correct but try do not use rootScope or modify and avoid rootScope modification.
If you need use some value from rootScope:
extract this value to local scope of particular controller and
after that use it
Use WATCH operator to avoid situations when you
render some value before it initialised.
<option ng-repeat> does not work in angularjs.
you should use
<select id="countryMobile" ng-model="countryMobile" class="select-styled" name="countryMobile" required ng-options="country.id as country.name for country in contries"></select>
http://docs.angularjs.org/api/ng/directive/select