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>
Related
I have a simple search box. When the input box is not empty a delete button shows up to remove the text inside the box. After that the button should disappear again until i type something in the box again.
When i manually remove the text the delete box is disappearing, but when i press the delete button its not working. Do i have to use .length? I was using .value before like that: if ($(".form-control").value == '' || $(".form-control").value == $(".form-control").defaultValue) {
Thanks in advance.
a = $scope
a.change = function () {
a.limit = 6;
var x = a.search;
if (x.length == '') {
$(".form-inline").removeClass("isset");
} else {
$(".form-inline").addClass("isset");
}
};
a.clearSearch = function () {
a.search = "";
a.limit = 6;
};
html part:
<input type="search" ng-change="change()" ng-model="search" class="form-control" placeholder="Labor durchsuchen...">
<div class="icon-close" ng-click="clearSearch()"></div>
You can use ng-class for that what you are doing with JQuery:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
$scope.change = function () {
//do anything here
};
$scope.clearSearch = function () {
$scope.formData.search = "";
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="search" ng-class="(formData.search != undefined && formData.search)?'isset':''" ng-change="change()" ng-model="formData.search" class="form-control" placeholder="Labor durchsuchen...">
<div class="icon-close" ng-click="clearSearch()"></div>
</div>
You should be able to drop the jQuery code and just use
<div class="icon-close" ng-click="clearSearch()" ng-show="search.length===0"></div>
I think you need to trigger your a.change function inside a.cleanSearch to check again if something is typed or not.
a.clearSearch = function () {
a.search = "";
a.limit = 6;
a.change()
};
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>
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
I have created zz-messages directive in Angular 1.2.28 as a replacement of ng-messages to work in ie8.
(function () {
'use strict';
angular
.module('app.widgets')
.directive('zzMessages', errorContainer);
function errorContainer() {
// Usage:
// <div zz-messages="field.$error">
// <span zz-message="required">This field is required</span>
// </div>
// Replacement for zz-message angular library to show single error on screen at a time and hide others
return {
link: function ($scope, element, attrs) {
var messageElements = element[0].querySelectorAll('[zz-message]');
angular.forEach(messageElements, function (message) {
message.style.display = 'none';
});
$scope.$watchCollection(attrs.zzMessages, function (messages) {
var existingMessageOnView = false;
angular.forEach(messageElements, function (message) {
var zzMessage = angular.element(message).attr('zz-message');
if (!existingMessageOnView && messages[zzMessage] === true) {
message.style.display = 'block';
$(message).addClass('error-message');
existingMessageOnView = true;
} else {
message.style.display = 'none';
}
});
});
}
}
}
}());
It works fine for all the times except in a special case.
<div zz-forminput>
<label for="headquarter" class="col-md-4">Family Headquarter</label>
<div class="col-md-8">
<input type="text" name="headquarter" id="headquarter" placeholder="K" data-ng-model="vm.userDetails.familyHQ" data-ng-maxlength="100" ng-pattern="/^[a-zA-Z0-9 ]+$/" maxlength="101">
<div zz-messages="vm.basicDetailsForm.headquarter.$error" data-ng-if="vm.basicDetailsForm.headquarter.$dirty">
<span zz-message="pattern">Family Headquarter can only contain alpha numeric characters</span>
<span zz-message="maxlength">Family Headquarter cannot exceed 100 characters</span>
</div>
</div>
I have my input field which is not required but it has a ng-maxlength="100" and ng-pattern. When the field is cleared, ng-invalid-maxlength and zz-invalid-pattern is added to input field.
Please fix this issue.
It got it solved. Problem was in a custom zzMinAlphaCharacters validator that I made. Thanks for support :)
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)
})