Initially the value of button is disable because value of button is true so the button is disabled.After selecting the checkbox now the button should be able to click. But it is not able to click :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a = function(x) {
console.log(x);
a = [1, 2, 3];
console.log(a);
}
});
</script>
</body>
</html>
Your ng-disabled always checks for length. But you actually need to check the boolean value of your checkbox to satisfy the scenario you are trying to achieve.
I have updated your code to the code below
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='formData.week[0]==false &&
formData.week[1]==false &&
formData.week[2]==false &&
formData.week[3]==false &&
formData.week[4]==false
' ng-click=a(formData)>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formData = {}
$scope.formData.week = []
$scope.formData.week[0]=false;
$scope.formData.week[1]=false;
$scope.formData.week[2]=false;
$scope.formData.week[3]=false;
$scope.formData.week[4]=false;
});
</script>
</body>
</html>
change ng-disabled='!formData.week.length'
to
ng-disabled='!(!!formData.week[0] || !!formData.week[1] || !!formData.week[2] || !!formData.week[3] || !!formData.week[4])'
check out the working example : https://plnkr.co/edit/JOARO1NwgunCw5Zcyvpo?p=preview
Actually there is something to understand
<div ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="formData.week[0]" ng-true-value="'a'">a
<input type="checkbox" ng-model="formData.week[1]" ng-true-value="'s'">s
<input type="checkbox" ng-model="formData.week[2]" ng-true-value="'d'">d
<input type="checkbox" ng-model="formData.week[3]" ng-true-value="'f'">f
<input type="checkbox" ng-model="formData.week[4]" ng-true-value="'g'">g
<input type="submit" ng-disabled='!formData.week.length' ng-click=a(formData)>
</div>
So when you are applied NgModel as formData.week[0] so it will form the scope variable formData something like that
{
"week" :{"0":true,"1" : true", "2" : "false"
}
as you have not declared formData.week as an array. So for this object to be checked on length you need to make a function like
<input type="submit" ng-disabled='!checkLength()' ng-click=a(formData)>
the function will look like
$scope.checkLength = function(){
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0)
return true;
else
return false;
}
Moreover if you want the button enabled only when any of the checkboxes is true. then you may modify the function
$scope.checkLength = function(){
if($scope.formData && $scope.formData.week && Object.keys($scope.formData.week).length > 0) {
var point = 0;
for(var i=0;i< Object.keys($scope.formData.week).length;i++){
if($scope.formData.week[i] == true){
point++;
break;
}
}
if(point>0) return true;
else return false;
}
else
return false;
}
Related
I'm new to AngularJS and I am doing some tutorials to get in touch with it. While I'm doing the tutorials I have modified the code a bit to get a better feeling of what's behind. My code consists of two parts, which have nothing to do with each other.
The first one is a simple user input and based on that a list gets filtered. This is working fine.
However, in the second part I was trying to implement a simple adding function where the user can give an input and based on that the sum of two numbers is calculated. This part is not working at all. The numbers are being recognised as strings. The code is basically from this source here. When I copy the whole code and run it, it works fine, but when I modify it a bit it doesn't.
I want to understand why my code isn't working. To me there is nearly no difference. So I think that I eventually misunderstood the concept of angularjs. But I can't figure out where the error could be.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
function TodoCtrl($scope) {
$scope.total = function () {
return $scope.x + $scope.y;
};
}
</script>
</head>
<body data-ng-app>
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</body>
</html>
Several things to change...
First you need to create a module:
var app = angular.module("myApp", []);
Then you need to define a module e.g. myApp on the ng-app directive.
<body data-ng-app="myApp">
Then you need to add TodoCtrl to the module:
app.controller("TodoCtrl", TodoCtrl);
Also check that both $scope.x and $scope.y have values, and make sure that they are both parsed as integers, otherwise you will get string concatenation ("1"+"1"="11") instead of addition (1+1=2)!
$scope.total = function () {
return ($scope.x && $scope.y)
? parseInt($scope.x) + parseInt($scope.y)
: 0;
};
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
(function(){
var app = angular.module("myApp", []);
app.controller("TodoCtrl", TodoCtrl);
function TodoCtrl($scope) {
$scope.total = function () {
return ($scope.x && $scope.y)
? parseInt($scope.x) + parseInt($scope.y)
: 0;
};
}
}());
</script>
</head>
<body data-ng-app="myApp">
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</body>
</html>
As mentioned in the above two answers adding TodoCtrl as controller instead function will make the snippet work.
REASON:
Angularjs framework above 1.3 does not support global function which means declaring controller as function wont work.
In your code snippet, you are using angular version 1.5, which needs the controller to be defined.
DEMO
angular.module("app",[])
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</div>
you need to define the TodoCtrl as controller instead function
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
Demo
angular.module("app",[])
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</div>
I do not want to render validation issues until a user attempts to submit my form.
I have a form with 2 fields, one is required and ng-minlength=5, the other is ng-minlength=5. If the fields are invalid, I would like to display them with a red background if the user attempts to submit the form.
I am attempting to do this by determining the style in the controller based on the field's validity and if the submit button has been clicked.
This isn't working for me though, the field never displays as red. Any suggestions as to how I can get this approach to work?
Is this a reasonable approach, or is there a strategy more idiomatic to Angular?
https://jsfiddle.net/dk89dhp2/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<style>
.my_invalid{
border-color:#ffdddd;
background-color:#ffdddd;
background-image: none;
}
</style>
<body ng-app="myapp">
<div ng-controller="MyController" >
<form name="myFormNg">
<input type="text" class="myForm.getFormFieldCssClass(myFormNg.id)" name="id" ng-model="myForm.id" ng-minlength="5" required> Id <br/>
<input type="text" class="myForm.getFormFieldCssClass(myFormNg.name)" name="name" ng-model="myForm.name" ng-minlength="5"> Name <br/>
<button type="button" ng-click="myForm.submit()">Submit</button>
</form>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myForm = {};
$scope.showErrors = false;
$scope.myForm.submit = function() {
$scope.showErrors = true;
}
$scope.myForm.getFormFieldCssClass = function(ngModelController) {
if (ngModelController.$pristine)
return "";
return ngModelController.$valid && $scope.showErrors ? "" : "my_invalid";
// additional logic to check if empty and required?
}
} );
</script>
now it's not working because you're using class that allow you to bind only "static" classes instead of the ng-class directive.
i'd change your code just to add the directive, about your approach, i'd stick with it, you need some sort of control that check if the form is valid and if the error are enabled.
<input type="text" ng-class="{'input1Error': myForm.getFormFieldCssClass(myFormNg.id})" />
<input type="text" ng-class="{'input2Error': myForm.getFormFieldCssClass(myFormNg.id})" />
then at the end of your method change the return type to boolean to determine whether to apply or not the class
$scope.myForm.getFormFieldCssClass = function(ngModelController) {
if (ngModelController.$pristine)
return false;
return ngModelController.$invalid && $scope.showErrors ? true : false;
}
you can try as below also.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<style>
.my_invalid{
border-color:#ffdddd;
background-color:#ffdddd;
background-image: none;
}
</style>
<body ng-app="myapp">
<div ng-controller="MyController" >
<form name="myFormNg">
<input type="text" class="myForm.getFormFieldCssClass(myFormNg.id)" id="textbox1" name="id" ng-model="myForm.id" ng-minlength="5" required> Id <br/>
<input type="text" class="myForm.getFormFieldCssClass(myFormNg.name)" id="textbox2" name="name" ng-model="myForm.name" ng-minlength="5"> Name <br/>
<button type="button" ng-click="myForm.submit()">Submit</button>
</form>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myForm = {};
$scope.showErrors = false;
$scope.myForm.submit = function() {
angular.element('#textbox1').css('border-color', 'red');
angular.element('#textbox2').css('border-color', 'red');
}
$scope.myForm.getFormFieldCssClass = function(ngModelController) {
if (ngModelController.$pristine)
return "";
return ngModelController.$valid && $scope.showErrors ? "" : "my_invalid";
// additional logic to check if empty and required?
}
} );
</script>
</body>
</html>
Here are the code:
I want to get checked radio button value with angularjs click funciton?
<input type="radio" name="calender" value="calender">
<input type="radio" name="calender" value="calender2" checked="checked">
<button ng-click="get_val($event)">Click</button>
$scope.get_val= function(event)
{
}
Here you can add this to get value
var flag_item_val = $("input:radio[name=calender]:checked").val();
Just check out this below code snippet on how to bind values to the ng-model and you can access them anywhere in scope.
var app = angular.module('plunker', []);
app.controller('MainCtrl',
function MainCtrl($scope) {
$scope.radioVal = 'calender2';
$scope.get_val = function(event) {
console.log($scope.radioVal);
}
});
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<input type="radio" name="calender" value="calender" ng-model="radioVal">
<input type="radio" name="calender" value="calender2" ng-model="radioVal">
<button ng-click="get_val($event)">Click</button>
</div>
I'm dynamically creating forms with ng-repeat and they have some validation attributes (simplified version):
<div class="row" ng-repeat="defect in model.defects">
<form name="form_{{defect.id}}" novalidate>
<input ng-model="defect.name" required/>
<input type="submit" ng-click="saveDefect(defect)"/>
</form>
</div>
Basically what I want to do is this:
$scope.saveDefect = function (defect) {
if ($scope.<how to get the form name here>.$invalid) {
return;
}
}
Since the form name has been created dynamically with an id how do I access it? Other ways of doing the same are also welcome ofcourse :)
You can use the bracket notation to access it :
$scope["form_"+defect.id]
What I advise you to do is :
var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
$scope.forms = {};
$scope.list = [{id: 1}, {id: 2}];
$scope.save = function(item) {
if ($scope.forms["form_" + item.id].$invalid) {
alert("error on form_" + item.id);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="Ctrl">
<div class="row" ng-repeat="item in list">
<form name="forms.form_{{item.id}}" novalidate>
<input ng-model="item.name" required/>
<input type="submit" ng-click="save(item)" />
</form>
</div>
</body>
Problem: we have a group of check-boxes.i want only one checked at a time(like as radio button).
I am doing like this.
In View
<div>
<input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
<div ng-if="first">
<label>Hi</label>
</div>
<input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
<div ng-if="second">
<label>Adem</label>
</div>
</div>
In Controller
function controller(){
$scope.checkOne=function(val){
if(val == '1'){
$scope.first=true;
$scope.second=false;
}
if(val == '2'){
$scope.second=true;
$scope.first=false;
}
}
}
But it is not working.it selects both the check-boxes.
Please suggest me a solution.
Thanks.
Try this:
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller">
<input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
<div ng-if="first">
<label>Hi</label>
</div>
<input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
<div ng-if="second">
<label>Adem</label>
</div>
</div>
</body>
</html>
script.js
function controller($scope) {
$scope.checkOne=function(val){
if(val == '1'){
$scope.first=true;
$scope.second=false;
}
if(val == '2'){
$scope.second=true;
$scope.first=false;
}
}
}
http://plnkr.co/edit/WEn4CBXA3RvtZ33VuPyM?p=preview
You need to use ng-checked.
I also set any checked checkboxes to be disabled so that they can't be unchecked.
After that, a simple function with a switch statement to toggle all of them on ng-click.
Controller:
$scope.firstCheck = true;
$scope.checkToggle = function(checkbox) {
switch (checkbox) {
case 'first':
$scope.firstCheck = true;
$scope.secondCheck = false;
$scope.thirdCheck = false;
break;
case 'second':
$scope.firstCheck = false;
$scope.secondCheck = true;
$scope.thirdCheck = false;
break;
case 'third':
$scope.firstCheck = false;
$scope.secondCheck = false;
$scope.thirdCheck = true;
break;
}
}
HTML:
<div>
<input type="checkbox" ng-disabled="firstCheck" ng-click="checkToggle('first')" ng-model="first" ng-checked="firstCheck" />
<div ng-if="first">
<label>Hi</label>
</div>
<br/><input type="checkbox" ng-disabled="secondCheck" ng-click="checkToggle('second')" ng-model="second" ng-checked="secondCheck" />
<div ng-if="second">
<label>Adem</label>
</div>
<br/><input type="checkbox" ng-disabled="thirdCheck" ng-click="checkToggle('third')" ng-model="third" ng-checked="thirdCheck" />
<div ng-if="third">
<label>something else</label>
</div>
Checkbox Treat as RadioButton : Here We have four checkbox, and all should be work as RadioButton. Checkbox with ng-change is use for change value of ng-model.
http://plnkr.co/edit/yTJUZcFoLsSEBjruRuEY?p=preview
App.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.first = false;
$scope.second = false;
$scope.third = false;
$scope.fourth = false;
});
HTML
<div>{{first}}|{{second}}|{{third}}|{{fourth}}
<br/>
<input type="checkbox" ng-model="first" ng-change="second=false;third = false;fourth = false;" />
<input type="checkbox" ng-model="second" ng-change="first = false;third = false;fourth = false;" />
<input type="checkbox" ng-model="third" ng-change="first =false;second = false;fourth = false;" />
<input type="checkbox" ng-model="fourth" ng-change="first = false;second = false;third = false;" />
</div>