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
Related
Html View:
<input type="checkbox"
id="checkbox1"
class="make-switch"
ng-init="option=true"
ng-change="getInput(option)"
ng-model="option"
data-on-text=" Individual "
data-off-text=" Company " input >
Controller file:
$scope.getInput = function(option){
alert(option);
}
I am using the checkbox with make-switch class. It's not getting fired. The ng-change directive is not affecting any changes.
Simply, initialize your option variable in your controller, like this:
$scope.option = false;
angular.module('MetronicApp').controller('leadDetailsController', function($rootScope, $scope, $http, $timeout) {
$("[name='makeSwitch']").bootstrapSwitch();
$scope.select = true;
$scope.leadSelect = false;
$scope.option = false;
//Next Click
$scope.nextView = function(leadSelect){
$scope.select = false;
$scope.Individual = true;
}
$scope.getInput = function(option){
alert(option);
}
});
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 Angular (1.5) I have a form with two input fields:
ID
URL
The rules:
If the ID field is empty then the URL field should be empty
If the URL field is manually set then it should not change automatically
Otherwise the URL field should be "http://myurl/"+ID+".txt"
How do I achieve this?
<input type="text" name="url"
ng-model="url"
ng-model-options="{ getterSetter: true }" />
...
function defaulUrl() {
if $scope.ID {
return 'http://myurl/'+$scope.ID+'.txt';
}
return ''
}
var _url = defaultURl();
$scope.url = {
url: function(url) {
return arguments.length ? (_url= url) : defaulUrl();
}
}
};
Use $watch on ID Field. If the ID field is changed, the watch function will be called.
$scope.$watch('$scope.ID', function() {
$scope.url = 'http://myurl/' + $scope.ID + '.txt';
}, true);
Here is a fiddle I made that meets your requirments:fiddle
The code
//HTML
<div ng-app="myApp" ng-controller="MyController">
ID <input type="text" ng-model="data.id" ng-change="onIDChange()"/>
URL <input type="text" ng-model="data.url" ng-change="onManualUrlChange()"/>
</div>
//JS
angular.module('myApp',[])
.controller('MyController', ['$scope', function($scope){
$scope.data = {
id:'',
url:''
}
$scope.manualUrl = false;
$scope.onIDChange = function(){
if(!$scope.manualUrl){
if($scope.data.id === ''){
$scope.data.url = '';
} else {
$scope.data.url = "http://myurl/" + $scope.data.id + ".txt";
}
}
}
$scope.onManualUrlChange = function(){
$scope.manualUrl = true
};
}]);
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>
I need to call a function from ng-change on an input of type text only once, and on the first call it sets a boolean value to true, after that i want to disable the ng-change from firing whenever the input changes because all i need to do is to change a boolean to true
here is the controller
angular.module("app",[]).controller('FieldCtrl',['$scope',function($scope){
$scope.Value = '';
$scope.IsRequired = true;
$scope.HasBeenForTheFirstTime = false;
$scope.ValueChanged = function() {
$scope.HasBeenForTheFirstTime = true;
console.log("isFired");
};
}]);
and the html simply
<input type="text"
ng-model="Value"
value="{{Value}}"
ng-change="ValueChanged()">
one more thing is, is using ng-change the right thing in this case?
Using $watch...
angular.module("app",[]).controller('FieldCtrl',['$scope',function($scope){
$scope.Value = '';
$scope.IsRequired = true;
$scope.HasBeenEditedBefore = false;
$scope.UnWatch = $scope.$watch("Value",function(){
if($scope.Value.length > 0)
{
$scope.HasBeenEditedBefore = true;
$scope.UnWatch();
}
});
}]);
you can remove $scope.ValueChanged function and use the following code is enough.
<input type="text"
ng-model="Value"
value="{{Value}}"
ng-change="HasBeenForTheFirstTime=true" />