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)
}
}
Related
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.
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 angular 1.5 Version. The Text Area is not giving the live preview. I've written ng-model and written controller code, now I have no idea what is missing in it.
Controller Code:
(function() {
var app = angular.module('wildfire', []);
var updateStatusText = 'test';
app.controller('UpdateStatusController', function() {
this.message = updateStatusText;
this.updateStatus = function(text) {
var StatusObject = {};
updateStatusText = text;
}
});
}
HTML Code:
<div class="well">
<form class="form-horizontal" role="form" ng-controller="UpdateStatusController as statusUpdate" ng-submit="statusUpdate.updateStatus(statusUpdate.message)">
<h4>What's New</h4>{{statusUpdate.message}}
<div class="form-group" style="padding:14px;">
<textarea class="form-control" ng-model "statusUpdate.message" placeholder="Update your status"> </textarea>
{{statusUpdate.message}}
</div>
</div>
Its not giving the live preview and after submitting it does not send any value associated with the TextArea. I debugged it several time but no result totally frustrating.
Change this
ng-model "statusUpdate.message"
To this
ng-model = "statusUpdate.message"
Complete example
<div class="well">
<form class="form-horizontal" role="form" ng-controller="UpdateStatusController as statusUpdate" ng-submit="statusUpdate.updateStatus(statusUpdate.message)">
<h4>What's New</h4>{{statusUpdate.message}}
<div class="form-group" style="padding:14px;">
<textarea class="form-control" ng-model= "statusUpdate.message" placeholder="Update your status"> </textarea>
{{statusUpdate.message}}
</div>
</div>
angular.module('wildfire', []).controller('UpdateStatusController',['$scope', '$http', function($scope, $http){
var updateStatusText = 'test';
this.message = updateStatusText;
this.updateStatus = function(text) {
var StatusObject = {};
updateStatusText = text;
}
}]);
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);
}
How to synchronize $scope.department in 2 controllers. no matter I enter the value in which input, the $scope.department still can update base on the input field. example
Angularjs
var app = angular.module('app', []);
app.controller('GreetCtrl', function($scope) {
$scope.department= "HR department";
});
HTML
<body ng-app="app">
<div class="show-scope-demo">
<div ng-controller="GreetCtrl">
<input type="text" ng-model="department">
{{department}}
</div>
<div ng-controller="GreetCtrl">
<input type="text" ng-model="department">
{{department}}
</div>
</div>
</body>
You can create a constant in Angular JS like this.
So Department will always contains "HR department".
var app = angular.module('app', []);
app.constant("Department", "HR department");
app.controller('GreetCtrl', function ($scope, Department) {
$scope.department = Department;
});
But you should do something like the below to acheive the scenerio which you have metioned
Working Demo
html
<div class="show-scope-demo">
<div ng-controller="GreetCtrl">
<input type="text" ng-model="department" ng-change="preventChange()">{{department}}</div>
<div ng-controller="GreetCtrl">
<input type="text" ng-model="department" ng-change="preventChange()">{{department}}</div>
</div>
script
var app = angular.module('app', []);
app.constant("Department", "HR department");
app.controller('GreetCtrl', function ($scope, Department) {
$scope.department = Department;
$scope.preventChange = function () {
$scope.department = Department;
}
});
If you want to share the variable between the controllers then use $rootScope.
assign $rootScope.department = "somehting".
Please refer the below question..
Sharing scope between controller & directive in AngularJS