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.
Related
I'm currently working on an AngularJS project and I would like to print option selected on a drop down list together with input data that has been entered by the user without using the backend. How can this be done using AngularJS? Any help?
I believe you wanted something like Prefix + Name, her https://jsfiddle.net/datachand/szc550yb/3/
<div ng-controller="UserCtrl as vm">
<select ng-model="vm.prefix">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select>
<input type="text" ng-model="vm.name" placeholder="Enter your Name">
<button ng-click="vm.submit()">
Send
</button>
</div>
A controller is needed at any case, even if it's empty:
angular.module('app', []);
function UserCtrl ($log) {
$log.log('UserCtrl');
var vm = this;
vm.submit = function () {
$log.log(vm.prefix, vm.name);
$window.location.href = "https://towhateverurl" + "?prefix=" + vm.prefix +"&name=" + vm.name;
}
UserCtrl.$inject = ['$log'];
angular.module('app').controller('UserCtrl', UserCtrl);
I hope this is what, is required.
I can not get a value in my form, I have 2 controllers and I'm trying to print the value of a dropdownlist which is inside a second controller (CtrlB). How can I get the value from this child controller on my parent controller? Everything is working very good, the render with the values of my dropdownlist, my form, my validations, except the value that get the $scope.dropdownlist. Any help?
my CtrlA controller
$scope.register = function (isValid) {
name = $scope.name; // works!
documentType = $scope.dropdownlist; // Got undefined :(
}
my directive
<select ng-model="dropdownlist" <!-- I can not get this value inside my CtrlA controller-->
ng-options="x.description for x in types">
</select>
my form
<form role="form"
name="nonClientRegisterForm"
ng-submit="register(nonClientRegisterForm.$valid);"
novalidate>
<div class="form-group"
ng-class="{ 'has-error' : nonClientRegisterForm.name.$invalid && !nonClientRegisterForm.name.$pristine }">
<input
type="text"
name="firstinput"
ng-model="firstinput"
class="form-control"
required />
</div>
<div>
<!-- This component has its own controller that fills this dropdownlist -->
<dropdownlist ng-controller="CtrlB"></dropdownlist>
</div>
<span ng-show="
(nonClientRegisterForm.name.$invalid &&
!nonClientRegisterForm.name.$pristine)"
class="help-block">
Debes completar todos los campos.
</span>
<button
type="submit"
ng-disabled="nonClientRegisterForm.$invalid">
continuar
</button>
</div>
</form>
</div>
you should use $rootscope to get values from child controller to parent controller.
$scope.register = function (isValid) {
name = $scope.name;
documentType = $rootscope.dropdownlist;}
function CtrlB($scope) {
$rootscope.dropdownlist="A";}
<div class="info-block" ng-app="">
<div ng-controller="Note">
<div class="checkbox">
<label>
<p><b>Primary Publication: </b>
{{ form_widget(form.input_ppubs, { 'attr': {'class': 'valOption'}}) }}
</p>
</label>
</div>
<div ng-repeat="item in items">
<input type="text" placeholder="new input" ng-model="item.primaryPub">
</div>
<button type="button" ng-click="add()">New Item</button>
</div>
I am trying to retrieve the value of the html input field and remove it from input upon a button click
I am able to get the code, but I don't know how to remove the code.
var Note = function($scope){
$scope.items = [];
$scope.add = function () {
//angular way of implementing document.getElementByID();
pub1 = angular.element('#form_input_ppubs').val();
$scope.items.push({
primaryPub: pub1
});
};
}
You don't have to retrieve your items like this. It's ugly and not the angular way. angular.element('#form_input_ppubs').val();
Instead, simply reference it in your input using ngModel.
Declare it in your scope.
$scope.inputItem = null;
HTML
<input ng-model="inputItem " />
Use it in your function:
$scope.addItem = function(item) {
$scope.items.push(item);
//reset the model
$scope.inputItem = null;
}
Call it using ng-click
<button type="button" ng-click="addItem(inputItem)">Add Item</button>
If you do:
console.log($scope.items);
You should see an entry for primaryPub, the model for your input. Then you can target it by nulling the model, so:
$scope.items.primaryPub = null;
However you're using this inside an ng-repeat:
<div ng-repeat="(i, item) in items">
<input type="text" placeholder="new input" ng-model="items[i].primaryPub">
</div>
So your console.log (if you have more than one item in 'items') should show an array-like structure for primaryPub.
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
HTML:
<div ng-controller="TestController" >
<form name="test_form" ng-submit="submit()">
<input type="text" name="some_name" ng-model="form_data.some_name" required>
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="form_data.data_input" required>
</ng-form>
<a ng-click="addKey()">NEW KEY</a>
</form>
</div>
JS:
app.controller('TestController', function TestController($scope){
$scope.keys = [];
$scope.addKey = function() {
$scope.keys.push({});
}
$scope.submit = function() {
console.log($scope);
}
});
In submit function I can get the value of "some_name" input:
$scope.submit = function() {
console.log($scope.form_data.some_name);
}
But I can't get the values of "data_input" inputs (they are inside ngform tag). How to do that?
(ngform tag is using for ability to validate each new added input separately)
Each input inside the ng-repeat needs its own unique ng-model property -- they all can't use form_data.data_input. Here is one way to solve your problem:
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="key.data" required>
</ng-form>
$scope.addKey = function () {
$scope.keys.push({ data: ''});
}
Fiddle.
See also https://stackoverflow.com/a/14379763/215945