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.
Related
I am having multiple input text in form and on ng-focus I am calling a method let's say GetFieldName().
I my angular.js how can I detect that method having the focus on first field or second.
How can I validate that withing getFieldName() method to get field which have focus on it.
The best solution is to make angularJS directive to get the attrs
or to make the validation
https://docs.angularjs.org/guide/forms
This is solution with controller and $event to get the name attribute from element
var myApp = angular.module('myApp',[]);
myApp.controller('formCtrl', ['$scope', function($scope) {
$scope.text = "sample text";
$scope.getName = function(event){
$scope.text = event.target.getAttribute('name');
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<form ng-controller="formCtrl">
{{text }}
<input type="text" name="text1" ng-focus="getName($event)">
<input type="text" name="text2" ng-focus="getName($event)">
<input type="text" name="text3" ng-focus="getName($event)">
<input type="text" name="text4" ng-focus="getName($event)">
</form>
</div>
I created edit form so I have to include default value for each text field. I wrote this HTML code:
<input type="text" ng-model="projectData.title" ng-init="projectData.title=title" name="title" class="form-control" />
In controller:
$scope.title = "This is just title";
It shows nothing in the text box. I tried ng-init="projectData.title={{title}}" and ng-init="projectData.title='title'" but it's just not working.
I'm using angularjs 1.6 and the following solution is not working too.
http://jsfiddle.net/Aejvm/337/
In your scope, you should declare the object like so:
$scope.projectData = {};
$scope.projectData.title = "This is just title";
Check This [Code][1]
[1]: http://jsfiddle.net/d4ts76ys/
Use the object to map it to ng-model
Well you are doing a little wrong.
ng-init is angular directive and you dont need curly braces.
modify your code to this :
html:
<div ng-controller="MyCtrl">
<input type="text" ng-init="rootFolders.name=name" ng-
model="rootFolders.name" >
<br>rootFolders={{name}}
</div>
js:
var app = angular.module('myApp',[]);
app.controller('MyCtrl', function($scope) {
$scope.name = "Acunisasi";
});
I have created fiddle that may help your
jsfiddle
//html
<div ng-controller='MyCtrl'>
<form>
<input ng-init="projectData.title = title" type="text" ng-model="title">
<button ng-click="formSubmit()">
submit
</button>
</form>
{{title}}
</div>
//js
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', MyController]);
function MyController($scope) {
$scope.projectData = {};
$scope.title = 'This is just title';
$scope.formSubmit = function() {
console.log("$scope.projectData ===>", $scope.projectData)
}
}
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'));
};
I am using a javascript UI library as DHTMLX or YUI etc.
And I am using AngularJS to process dynamic page.
What I need is just simple.
UI code is
...
<Input type="checkbox" name="XXX" />
....
My.js
...
app.controller('XXXCtrl', function($scope){
$scope.$watch(???){
if (XXX) console.log("checkbox was checked!!!");
else console.log("checkbox was unchecked!!!");
????
};
})
I am new to AngularJS. Please help me!!!
You have to bind the value to the scope via ng-model. There is more detail in the documentation, but you can do something like that:
$scope.checkboxModel = true;
$scope.myAction = function () {
msg = $scope.checkboxModel ? 'checked' : 'unchecked';
console.log(msg);
};
And in your HTML file:
<form name="myForm" ng-controller="XXXCtrl">
<label>Value1:
<input type="checkbox" name="XXX" ng-model="checkboxModel" ng-change="myAction()">
</label><br/>
<tt>value1 = {{checkboxModel}}</tt><br/>
</form>
You can access to the window object using document.getElementById combined with ng-click event listener
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope) {
$scope.checker= function(e){
var chkBox = document.getElementById(e.target.id);
console.log(chkBox.checked)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='appCtrl'>
<input type="checkbox" id="myCheckbox" name="myCheckbox" ng-click="checker($event)"/>
</div>
</div>
I have a form such as
Html:
<form ng-submit="log(user)">
<input type="text" ng-model="user.firstname">
<input type="text" ng-model="user.lastname
</form>
Angular:
.controller ('', function ($scope){
$scope.log = function (user){
console.log (user.firstname)
}
})
This was working before but now it throws cannot read property user.firstname
Please help me. Thank you
AngualarJs is rich in two way data binding. You didn't need to pass the scope object user in the function log. Its available in controller always with updated value. Just Initialise the user as scope object and try the code
In html:
<form ng-submit="log()">
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
</form>
In Js
.controller ('', function ($scope){
$scope.user = {}; // Declare here
$scope.log = function (){
console.log ($scope.user.firstname);
}
})
if user parameter is undefined you can't access firstname on undefined value, You can try below snippet to solve your problem.
.controller ('', function ($scope){
$scope.log = function (user){
if(user){ //Strict Check: toString.call(user) == "[object Object]"
console.log (user.firstname)
}
}
})
This is full working example, somewhat similar to yours.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Please try this.
Thanks
Amit
Remove below code
ng-submit="log(user)"
and remove button type submit
and add below line
<input type="button" ng-click="log()"/>
Your js file
$scope.log=function(){
console.log($scope.firstname);
console.log($scope.lastname);
}