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>
Related
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 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 the following Angular code
controller:
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.job = null;
vm.create = function (job) {
vm.job = job;
}
});
HTML:
<div ng-controller="MainCtrl as vm">
<span data-ng-bind="vm.job.position"></span>
<form name="form" data-ng-submit="vm.create(vm.job)">
<label for="position">Position</label>
<input id="position" name="vm.job.position" type="text" data-ng-model="vm.job.position" />
<button>Create</button>
</form>
</div>
But when I submit the form I don't see the Position value.
Any idea why?
Because
You forgot to add ng-app to the body or html element
You're using angular 1.0.8, which is completely obsolete, and doesn't support controller as.
Note that you don't even need to submit, since the job you're binding is already vm.job. Your create(vm.job) method call does nothing: it assigns vm.job to vm.job.
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 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>