As per core we used this for get element but in AngularJS we get $scope context.
So, i tried this question but can't success.
Here is my try,
Controller
$scope.clickMe = function(ele) {
console.log(ele);
console.log(ele.id);
};
HTML
<div class="input-group">
<input type="number" id="test-id" ng-blur="clickMe($event.target);">
</div>
Q : How do i get element in function.
Thank You !
use : $event.currentTarget;
<div class="input-group">
<input type="number" id="test-id" ng-blur="clickMe($event);">
</div>
$scope.clickMe = function(ele) {
console.log(ele);
console.log(ele.currentTarget);
};
Fiddle" http://jsfiddle.net/h8to34ux/221/
your ng-blur event should send $event only like ng-blur="clickMe($event);"
then in your controller
$scope.clickMe = function(ele) {
console.log(angular.element(ele));
console.log(angular.element(ele).attr('id'));
};
Related
i am facing a weird issue with angular js.
I am using a textarea and have a default value for that. But when i change the value in the textarea manually its not being updated in my controller.
Also the other scope is not being binded into the default value.
my Html
<div ng-controller="req" class ="ng-cloak">
<form name="dynamic_fields_tm" ng-submit="goDynamicTm()">
<input type="text" ng-model="tmDynam.one">
<input type="submit" value="Go!" ng-show="tm_dynamic1">
</form>
<div class="request" ng-if="postrequest_disp">
<textarea>{{postrequest}}</textarea>
</div>
</div>
Js
app.controller('req', function($scope ,$rootScope ,$http ,$location ,$window, $timeout) {
$scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";
$scope.postrequest_disp = true;
$scope.tm_dynamic1 = true;
$scope.goDynamicTm = function()
{
console.log($scope.postrequest);
}
});
First Issue. in the console i am only receiving the default value..but not the updated value when i update in textarea.
Second is the $scop.tmDynam.one is not being updated with the $scope.postrequest.
ALso i have used ng-model instead of {{}}. BUt still issue persists
Please help
Since you are using textarea inside ng-if it creates an isolated scope.So you need to access the parent scope. Use the ng-model in textarea with the $parent.postrequest.
Demo
var app = angular.module("myApp",[]);
app.controller('req', function($scope ,$rootScope ,$http ,$location ,$window, $timeout) {
$scope.tmDynam = {one:'', two: ''}
$scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";
$scope.postrequest_disp = true;
$scope.tm_dynamic1 = true;
$scope.goDynamicTm = function()
{ $scope.postrequest = "{'event':{'event_id':" + $scope.tmDynam.one+"} ,'note':'Testing', 'is_display_price': 'true', 'ticket_ids':["+$scope.tmDynam.two+"] }";
console.log($scope.postrequest);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="req" class ="ng-cloak">
<form name="dynamic_fields_tm" ng-submit="goDynamicTm()">
<input type="text" ng-model="tmDynam.one">
<input type="submit" value="Go!" ng-show="tm_dynamic1">
</form>
<div class="request" ng-if="postrequest_disp">
<textarea ng-model="$parent.postrequest"></textarea>
</div>
</div>
</div>
Can i call function inside a ng-model in angularJs like below ?
<input type="text" ng-model="choice.number = itemNumber()" class="form-control" readonly>
Any help appreciated ?
try use ng-init
<input type="text" ng-model="choice.number" ng-init="choice.number = itemNumber()" >
If you do like that you must likely to get Error: [ngModel:nonassign]. For more information You can see https://docs.angularjs.org/api/ng/directive/ngModel. If you need to call function in ng-modle best way would be updating it in controller.For example
<div class="result" ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="choice.number" class="form-control" readonly>
{{choice.number}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var hello = function(){
return 5;
}
$scope.choice = {number:hello()};
//console.log($scope.hello());
});
</script>
I hope you will find this helpful. you can also define the function using $scope.hello instead of var hello.
Im trying to validate my form, if the fields are valid then it should post the data to the DB if not prevent from posting the data to DB. when I submit the form Im getting an error TypeError: Cannot read property '$valid' of undefined, I don't know how to overcome it, need help in this.
html:
<form name="formvalidation">
<ion-view ng-controller="ValidationCheck">
<ion-content>
<div>
<strong>User:</strong> <br/>
<input ng-model="name" type="text" name="name" required/>
<ng-messages for="formvalidation.name.$error" ng-if="formvalidation.name.$invalid">
<div ng-messages-include="error/validation.html"></div>
<ng-messages>
</div>
</from>
<button ng-click="check()">
controller:
myApp.controller('ValidationCheck',function($scope, applicationService)
{
$scope.check=function(formvalidation){
var name={'name'=$scope.name};
$scope.submitted=true;
if(formvalidation.$valid){
applicationService.save(name,$scope.home);
}}});
Just change your if condition formvalidation.$valid to formvalidation
. because you already pass formvalidation.$valid in your function via ng-click
if(formvalidation){
...
...
...
}
Remove ng-click and add a ng-submit:
<form name="formvalidation" ng-submit="check()" novalidate>
Try this : ( controller before form )
<ion-view ng-controller="ValidationCheck">
<form name="formvalidation">
In your html you have:
<button ng-click="check(formvalidation.$valid)">
which calls the check function with either a true or false value (a boolean), depending on whether or not the form is valid.
In your controller you have the check function with the following if-statement:
if(formvalidation.$valid)
but formvalidation is a boolean (true or false)
I recommend removing the argument from check and simply access the formvalidation properties from the $scope variable.
so the html becomes
<button ng-click="check()">
and the controller becomes
$scope.check=function(){
var name={'name'=$scope.name};
$scope.submitted=true;
if($scope.formvalidation.$valid) {
applicationService.save(name,$scope.home);
}
}
<form> should come after controller declaration
<div ng-app="app">
<ion-view ng-controller="ValidationCheck">
<form name="formvalidation">
<ion-content>
var app = angular.module("app", []);
app.controller('ValidationCheck', function($scope) {
$scope.check = function(formvalidationBoolean) {
alert(formvalidationBoolean);
var name = {
'name': $scope.name
};
$scope.submitted = true;
if (formvalidationBoolean) {
//applicationService.save(name, $scope.home);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<ion-view ng-controller="ValidationCheck">
<form name="formvalidation">
<ion-content>
<div>
<strong>User:</strong>
<br/>
<input ng-model="name" type="text" name="name" required/>
<ng-messages for="formvalidation.name.$error" ng-if="formvalidation.name.$invalid">
<div ng-messages-include="templates/admin/validation.html"></div>
<ng-messages>
</div>
</from>
<button ng-click="check(formvalidation.$valid)">Submit</button>
</div>
You are sending boolean value "ng-click="check(formvalidation.$valid)", So your statement if(formvalidation.$valid){ inside controller is wrong.
And You need to change "=" to ":" in var name = {'name': $scope.name };
I have a very simple script that contains angular js
<script>
var delightApp = angular.module('delightmeter', []);
delightApp.controller('delightController', function ($scope) {
$scope.delightScore = 0;
$scope.test = function () {
if (isNaN($scope.delightScore)) {
// do not bind if this happens
}
}
});
</script>
The html of the above script is
<div id="angularapp" data-ng-app="delightmeter" data-ng-controller="delightController">
<input id="Text1" type="text" data-ng-model="delightScore" />
{{delightScore}}
<input id="Button1" type="button" value="button" data-ng-click="test()"/>
</div>
As we know in angular two way binding happens whatever may be the value in $scope.delightScore it gets bound to the html page.
Is there any way to stop this binding from happening ?
Rather than binding to the variable directly, Bind to a function that does your check
<div id="angularapp" data-ng-app="delightmeter" data-ng-controller="delightController">
<input id="Text1" type="text" data-ng-model="delightScore" />
{{ValideDelightScore()}}
<input id="Button1" type="button" value="button" data-ng-click="test()"/>
</div>
And in your controller define:
$scope.ValideDelightScore = function () {
if (isNaN($scope.delightScore)) {
return "";
}else{
return $scope.delightScore
}
}
There is no way to do that because you are explicity binding the model in both scopes. And even if you could you should'n mess with the Angular life-cycle, or you are going to have a bad time.
The right way to achieve what you need is, or using solution purposed by #Shivas Jayaram, or use a filter in where you don't want to display the model if isNaN.
angular.module('myApp.filters', [])
.filter('NaNFilter', function($moment, $translate) {
return function(value) {
if(isNaN(val)) {
return '';
}
return value;
};
});
And in your template:
<div id="angularapp" data-ng-app="delightmeter" data-ng-controller="delightController">
<div>Show delightScore if !NaN: {{delightScore | NaNFilter}}</div>
<input id="Text1" type="text" data-ng-model="delightScore" />
{{delightScore}}
<input id="Button1" type="button" value="button" data-ng-click="test()"/>
</div>
I' new to AngularJS and have a following ambiguity with usage of ngModel. I want to give to the user possibility to generate unlimited number of "name": "value" pairs. So I generating div with ng-repeat for every element from pair. Here is my html:
<div ng-app>
<div ng-controller="TestCtrl">
<input type="button" value="+" ng-click="addNewRow();"/>
<div ng-repeat="a in range(itemsNumber)"><input type="text" name="key"/> : <input type="text" name="value"/></div>
</div>
</div>
And the JavaScript:
function TestCtrl($scope) {
$scope.itemsNumber = 1;
$scope.range = function() {
return new Array($scope.itemsNumber);
};
$scope.addNewRow = function () {
$scope.itemsNumber++;
}
};
Here is working js fiddle:
http://jsfiddle.net/zono/RCW2k/
I want to have model for this generating items but not sure how to do it.
I would appreciate any ideas and tips.
Best regards.
Edit:
I have create other solution. It can be viewed in this fiddle
http://jsfiddle.net/zono/RCW2k/8/
But is this solution is good idea?
Here is a fiddle: http://jsfiddle.net/RCW2k/13/
You should just create an array on the scope and it's also your model:
controller:
function TestCtrl($scope) {
$scope.items = [{key:"hello",value:"world"}]
$scope.addNewRow = function () {
$scope.items.push({key:"",value:""});
}
};
html:
<div ng-controller="TestCtrl">
<input type="button" value="+" ng-click="addNewRow();"/>
<div ng-repeat="item in items">
<input type="text" name="key" ng-model="item.key"/> :
<input type="text" name="value" ng-model="item.value"/>
</div>
</div>