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
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)
I have this html code:
<select class="" ng-model="livre_selection" material-select multiple watch>
<option ng-repeat="livre in livres">{{livre.titre }}</option>
</select>
can I get the "livre_selection" in the controller and put it in a variable inside the controller so that I can use it ?
Thank you
Yes, AngularJS has two way data binding. whatever you put in the ng-model will be available in the controller through $scope object.
in your case you can access it by $scope.livre_selection
yes you can get that.follow the example.check ng-change and ng-click functions.you can do it by using both or only one function.
<html>
<body ng-app="myApp" ng-controller="yourCtrl">
<select ng-model="livre_selection" ng-change="a();" material-select multiple watch>
<option ng-repeat="livre in livres">{{livre.titre }}</option>
</select>
<input type="button" value="save" ng-click="b();">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('yourCtrl', function($scope) {
$scope.livres=[{titre:"a"}];
var selectedValue;
$scope.a = function(){
selectedValue = $scope.livre_selection;
}
$scope.b = function(){
alert(selectedValue);
}
});
</script>
</body>
</html>
Try
$scope.livre_selection = '';
Because $scope is basically a map, but more advisable yould be to use upperCase variable naming, like so:
$scope.liveReSelection = '';
After it, you will be able to access this variable in your controller.
You can read more here.
Controller
$scope.livre_selection = ""; <br>
var localVariable = "";
$scope.changeValue=function(changedVal){ localVariable = changedVal; }
HTML
Write an ng-change in the html near to the controller.
<select class="" ng-change="changeValue(livre_selection)" ng-model="livre_selection" material-select multiple watch>
<option ng-repeat="livre in livres">{{livre.titre }}</option>
</select>
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>
I'm using this example: https://jsfiddle.net/qnw8ogrk/1/ to create my radio-buttons.
I would like to be able to use $scope.watch on the radio-buttons, but I'm not able to use:
$scope.watch('selected', ...
What should I assign to .watch to be able to detect whenever a user clicks on a radio button?
Actual mistake was $scope.watch should be $scope.$watch Having watcher over a scope variable would not be the good idea. Instead of placing watcher over ng-model I'd suggest you to use ng-change which will only fires up when radio button ng-model value gets changed.
<label ng-repeat="option in options">
<input type="radio" ng-change="test()" ng-model="$parent.selected" ng-value="option" />{{option}}
</label>
And then don't use get rid of $parent notation for accessing outer scope of ng-repeat you could switch to use controllerAs pattern, and then change ng-controller directive to use alias of controller. Also that will change the controller implementation, bind value to this(context) instead of $scope
Markup
<div ng-controller="mainController as vm">
<label ng-repeat="option in vm.options">
<input type="radio" ng-change="vm.test()" ng-model="vm.selected" ng-value="option" />{{option}}
</label>
</div>
Controller
appModule.controller('mainController', function($scope) {
var vm = this;
vm.selected = 'red';
vm.options = ['red', 'blue', 'yellow', 'green'];
vm.test = function() {
alert('Changed');
}
});
Forked Plunkr
I agree with #PankajParker, but it is possible from you controller as well. You just got the syntax wrong, it is $scope.$watch, not $scope.watch
Have a look at this: https://jsfiddle.net/qnw8ogrk/32/
Fiddle: https://jsfiddle.net/stevenng/qnw8ogrk/33/
Markup
<div ng-app="app">
<div ng-controller="mainController">
<label ng-repeat="option in options">
<input type="radio" ng-change="picked(this)" ng-model="$parent.selected" ng-value="option"/>{{option}}
</label>
</div>
</div>
Script
var appModule = angular.module('app', []);
appModule.controller('mainController', function($scope) {
$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];
$scope.picked = function($scope) {
alert('you picked: ' + $scope.selected);
}
});
Here i need to call angularjs ng-click function variable in controller
Controller.js
$scope.basicDetail = function(){
var age = $scope.healthplan.insurer.age;
console.log(age);
};
// console.log(age);
How can i call ng-click function variable in controller
Updated
view.ejs
<select name="insurer_age" ng-model="healthplan.insurer.age" ng-init="(_Array = []).length = 83;" id="input" class="form-control">
<option value=""> select your age</option>
<option ng-repeat="i in _Array track by $index" value="{{$index+18}}">{{$index+18}} years</option>
</select>
<input type="button" ng-click="basicDetail()" name="next" class="next action-button" value="Next" />
$scope.basicDetail()
It is obvious
Just be carefull,because you create your function as a variable , you should first create it and then call it ,just like that :
//1.create
$scope.basicDetail = function(){
var age = $scope.healthplan.insurer.age;
console.log(age);
};
//2.call
$scope.basicDetail();
I dont see any other problem with that.
<input type="button" ng-click="basicDetail()" name="next" class="next action-button" value="Next" />
This is the right way to call a controller function using ng-click.