How to use AngularJS $rootScope? - javascript

I am passing three $rootScope from process controller to Rating controller so based on the $rootScope status i am enabling and disabling buttons. Edit and view is working good but on $rootScope === 'NewPrt', Once user answered all question i want to enable submit button on 'NewPrt'.
So far i tried below code..
HTML
<button type="submit" class="btn btn-default" ng-disabled="disabledDraft" ng-click="savePRTDraft()" ng-show="showSaveDraftBtn">Save
as Draft</button>
<button type="submit" class="btn btn-primary"
ng-disabled="disableSubmitButton" ng-click="submitClicked()">Submit</button>
ProcessCtrl.js
$scope.gotoQstnPage = function(isNew) {
var qrtUrl = "/createRtgQstnAir/"+$scope.processDTO.processKey + "/"+isNew;
$rootScope.status = 'NewPrt';
$location.path(qrtUrl);
}
$scope.editProcessRating = function(prcsSessionKey) {
var prtUrl = "/getProcessRating/"+prcsSessionKey;
$rootScope.status = 'edit';
$location.path(prtUrl);
}
$scope.viewProcessRating = function(prcsSessionKey) {
var prtUrl = "/getProcessRating/"+prcsSessionKey;
$rootScope.status = 'view';
$location.path(prtUrl);
}
RatingCtrl.js
if(j > $scope.questionnaire.length){
if($rootScope.status ==='edit') {
$scope.disableSubmitButton = false;
$scope.disabledDraft = false;
$scope.showBusDecDropDown = true;
}
$scope.disabledDraft = function(){
if($rootScope.status === 'view') {
return true;
}
else {
return false;
}
}
if ($rootScope.status === "NewPrt" ) {
$scope.disabledDraft = false;
}

You can try like this instead of using $rootScope
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="Controller">
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
</div>

When both conditions are true, enable the submit button:
if ($rootScope ==='edit' || $rootScope ==='NewPrt') {
$scope.disableSubmitButton = false;
}

if you want to use $rootScope you need to inject $rootScope in every controller where you want to use config run any where
like this
var app = angular.module('app');
app.config(function($rootScope){
$rootScope.name = "Hello World"
});
app.controller('home',function($scope,$rootScope){
$scope.name = $rootScope.name;
alert($scope.name)
})

Related

How to check the disabled button is true/false ? in angularjs

Hi guys is there any ways on how to check the disable button ??
Here is my button disabled code inside (index.html):
ng-disabled="epUpdateAllForm.$invalid || epUpdateAllForm.$pending"
In controller :
if((($scope.epUpdateAllForm.$invalid) || ($scope.epUpdateAllForm.$pending)) == true) {
console.log("Some mandatory fields is not completed");
}
You can check button is disabled using angular.element(..).prop()
var target = angular.element(document.getElementById("#buttonIdHere"));
if (target.prop('disabled')) {
// Button is disabled
}
Option 2
Watch for yourForm.$valid, yourForm.$invalid & yourForm.$pending in your controller
var isFormValid = false;
$scope.$watch('yourForm.$valid', function(newVal) {
isFormValid = true;
});
$scope.$watch('yourForm.$invalid', function(newVal) {
isFormValid = false;
});
$scope.$watch('yourForm.$pending', function(newVal) {
isFormValid = false;
});
And simply check if isFromValid is true before executing your submission logic.
If you need to check the logic of submit, then you can pass a form object to the handler submit.
Example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.submit = function(form) {
if (form.$invalid)
console.warn('Form is invalid');
else
console.log('Form is valid');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController as vm">
<form name="testForm">
<label> This field is required
<input type="text" name="testInput" ng-model="myInput" required>
</label>
<button ng-click="submit(testForm)">
Submit
</button>
</form>
</div>
</div>

JS wont recognize a variable within angular controller object

Im trying to create a simple login verification, however the validation function seizes to function when the validation comparison begins, and the console sais that the variable "userName is not defined" although it clearly is.
Can enyone tell me what am i defining wrong?
the angular controller code:
var app = angular.module("LoginApp", []);
app.controller("LoginController", function ($http) {
this.userName = "";
this.password = "";
this.userNameValid = true;
this.passwordValid = true;
/*submit the form*/
this.submit = function () {
alert("submit");
this.validate();
};
/* make sure user name and password has been inserted*/
this.validate = function () {
alert("validate");
var result = true;
this.userNameValid = true;
this.passwordValid = true;
if (this.userName == "") {
alert("username="+userName);
this.userNameValid = false;
result = false;
}
if (this.password == "") {
this.passwordValid = false;
result = false;
}
alert("validuserNameValid==" + userNameValid + " passwordValid==" + passwordValid);
return result;
};
});
the HTML form:
<body ng-app="LoginApp" ng-controller="LoginController as LoginController">
<form role="form" novalidate name="loginForm" ng-submit="LoginController.submit()">
<div id="loginDetails">
<div class="form-group">
<label for="user"> User Name:</label>
<input type="text" id="user" class="form-control" ng-model="LoginController.userName" required />
<span ng-show="LoginController.userNameValid==false" class="alert-danger">field is requiered</span>
</div>
<div class="form-group">
<label for="password" >Password:</label>
<input type="password" id="password" class="form-control" ng-model="LoginController.password" required />
<span ng-show="LoginController.passwordValid==false" class="alert-danger">field is requiered</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
{{"entered information:" +"\n"+LoginController.userName+" "+ LoginController.password}}
</div>
</div>
</form>
</body>
the log:
Error: userName is not defined
this.validate#http://localhost:39191/login.js:23:13
this.submit#http://localhost:39191/login.js:11:9
anonymous/fn#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js line 231 > Function:2:292
b#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:126:19
Kc[b]</<.compile/</</e#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:195
uf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:335
Kc[b]</<.compile/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:245
Rf#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:37:31
Qf/d#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:36:486
Always use this judiciously. I would recommend you to store the reference of this in variable then use it wherever required.
var app = angular.module("LoginApp", []);
app.controller("LoginController", function ($http) {
//Store the reference of this in a variable
var lc = this;
//Use the stored refrence
lc.userName = "";
/* make sure user name and password has been inserted*/
lc.validate = function () {
if (lc.userName == "") {
alert("username="+userName);
lc.userNameValid = false;
result = false;
}
};
});
inside your alert boxes you have not mentioned this.userName try removing the alert boxes or change them.

Validate the input field for existing item in object array?

in my todo list i dont want user to input same todos again again...
but my problem is, when i enter something for example (test) first time and than i enter (test2) and than i enter (test) again, so its taking a value.... how to validate properly....
fiddle
https://jsfiddle.net/LaL7h6Lv/1/
html
<div ng-app="todoApp" ng-controller="mainCtrl">
<ul>
<li ng-repeat="todoItem in todoItems">{{todoItem.name}}</li>
</ul>
<form ng-submit="addItem()">
<input type="text" ng-model="newItem">
<input type="submit" name="go">
</form>
</div>
angularjs
angular.module("todoApp", [])
.controller('mainCtrl', ['$scope', function($scope){
$scope.todoItems = [{'name' : 'akshay'}];
$scope.test = false;
$scope.addItem = function(){
if($scope.newItem){
$scope.checkRepeatTodo();
if($scope.test == true){
$scope.todoItems.push({'name':$scope.newItem});
$scope.newItem = '';
}else{
alert('same todo');
$scope.test = false;
}
}else{
alert('fill the form');
}
};
$scope.checkRepeatTodo = function(){
$scope.todoItems.filter(function(item){
if($scope.newItem === item.name){
$scope.test = false;
}else{
$scope.test = true;
}
});
};
}]);
The issue is with the $scope.test value, you override the value to true when it filters down the 3rd item.
See the Working fiddle
Alternative:
Make a javascript function rather than one in $scope and call that function return if its a valid entry or not.
This eliminates the need to have $scope.test and $scope.checkRepeatTodo as they do nothing of importance.
function checkRepeatTodo() {
var valid = true;
$scope.todoItems.filter(function(item){
if($scope.newItem === item.name){
return valid = false;
}
});
return valid;
};
And use the same as:
if(checkRepeatTodo()){
$scope.todoItems.push({'name':$scope.newItem});
$scope.newItem = '';
}
else{
alert('same todo');
}
Demo here

AngularJS - Form Submission

I've recently started using AngularJS, and even though I am able to send data through $http when the webpage loads, I'm unable to do it when a button is pressed. My code:
<div ng-app="myApp" ng-controller="myCtrl">
Username: <input type="text" id="u" ng-model="username"><br>
Password: <input type="text" id="p" ng-model="password"><br>
Email: <input type="text" id="e" ng-model="email"><br>
First Name: <input type="text" id="fn" ng-model="firstName"><br>
Last Name: <input type="text" id="ln" ng-model="lastName"><br>
<br>
<button onclick="sendData()">Click me</button>
<br>
{{status}}
</div>
<script>
var app = angular.module('myApp', []);
var arr = new Array();
function sendData() {
arr[0] = document.getElementById("u").value;
arr[1] = document.getElementById("p").value;
arr[2] = document.getElementById("e").value;
arr[3] = document.getElementById("fn").value;
arr[4] = document.getElementById("ln").value;
app.controller('myCtrl', function($scope, $http) {
$http.post("../signup.php", {'data' : arr})
.success(function(response) {
$scope.status = response.status;
$scope.description = response.description;
$scope.content = response.content;
});
});
}
</script>
With that code, the function in app.controller doesn't execute, but if I put it outside of the sendData() function, it does execute, but right after loading the page.
Can anyone help me getting it to work when the button is pressed?
SInce you want to use angular and you use ng-model in your view you should use ng-click on your button:
<button ng-click="sendData()">Click me</button>
Even better you can use ng-submit on your form and use a submit button.
In your controller you will have something like this:
$scope.username = '';
$scope.email = '';
// better have an user object here so you will not have n variables ...
$scope.sendData = function() {
var arr = [];
arr[0] = $scope.username;
arr[1] = $scope.email;
//........
$http.post("../signup.php", {data : arr})
.success(function(response) {
$scope.status = response.status;
$scope.description = response.description;
$scope.content = response.content;
});
}
You need to define the function on the scope of your controller
HTML
<button ng-click="sendData()">Click me</button>
JS
app.controller('myCtrl', function($scope, $http) {
$scope.sendData = function(
$http.post("../signup.php", {'data' : arr})
.success(function(response) {
$scope.status = response.status;
$scope.description = response.description;
$scope.content = response.content;
});
}
});

How to change value of variable in $scope on-click?

I would like to change the value of $scope.complete to false when the user clicks a particular URL. Is this possible to do in Angular?
I show credit card form to the user based on this variable. On first page load the variable is true/false based on value coming from server side that suggests whether there is a credit card on file or not.
If there is a credit card on file then I want to have a change url. Which, when clicked, would change the value of $scope.complete to false and the credit card form would show up.
This is my code at the moment:
JS
$scope.complete = false;
djangoAuth.profile().then(function(data){
$scope.model = data;
if ($scope.model.profile.stripe_id.length <= 0)
$scope.complete = false;
else
$scope.complete = true;
});
html:
<div ng-if="complete == false">
<!--show form-->
</div>
<div ng-if="complete == true">
Credit card already on file. Change?
</div>
You can bind a function to ng-cick and have the function change the value of the property:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.complete = true;
$scope.change = function() {
$scope.complete = false;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-show="complete == false">
form here
</div>
<div ng-show="complete == true">
Credit card already on file. Change?
</div>
</div>
See this fiddle showing ng-click on archive()
http://jsfiddle.net/dakra/U3pVM
archive
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
This isn't my fiddle, but shows how to use it.
Documentation is also at:
https://docs.angularjs.org/api/ngTouch/directive/ngClick
JS
$scope.complete = false;
djangoAuth.profile().then(function(data){
$scope.model = data;
// default scope
$scope.complete = true;
$scope.change = function(){
$scope.complete = true;
}
if ($scope.model.profile.stripe_id.length <= 0)
$scope.complete = false;
else
$scope.complete = true;
});
html:
<div ng-if="complete == false">
<!--show form-->
</div>
<div ng-if="complete == true">
Credit card already on file. <a ng-click="change()" ng-href="#">Change?</a>
</div>

Categories