I've been having a look some related post with no success in my case even having the same code.
I have a select like the following:
<div class="form-group">
<label for="col">Visible: </label>
<select class="custom-select" id="col"
ng-options="visible as visible.name for visible in visibility"
ng-model="selected_visible_product"
ng-change="update_product_list()"
style="width:140px">
<option>Visibility...</option>
</select>
<label>{{selected_visible_product}}</label>
</div>
Visibility array is defined like this:
$scope.visibility = [{ID:0, name:'Disabled'},{ID:1, name:'Enabled'}];
First time a print the value of selected_visible_product, it shows the correct value, but when I change the select option, update_product_list() print again the actual value of selected_visible_product and it shows the same.
This is what update_product_list() prints (na matter what you choose):
Object {ID: 0, name: "Disabled", $$hashKey: "object:140"}
update_product_list() just print in console the value of selected_visible_product
$scope.update_product_list = function() {
console.info($scope.selected_visible_product.ID);
}
What's happening?
UPDATE:
Here is a working snippet with your code. It seems to be working fine. What's different?
angular.module('myapp', [])
.controller('mycontroller', ['$scope', function mycontroller($scope) {
$scope.visibility = [{ID:0, name:'Disabled'},{ID:1, name:'Enabled'}];
$scope.update_product_list = function() {
alert($scope.selected_visible_product.name);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
<div class="form-group">
<label for="col">Visible: </label>
<select class="custom-select" id="col"
ng-options="visible as visible.name for visible in visibility"
ng-model="selected_visible_product"
ng-change="update_product_list()"
style="width:140px">
<option>Visibility...</option>
</select>
</div>
</div>
Related
I am trying to add a dropdown list with "Others" option. If user select "Others", Others (Please specify) input box will become Mandatory. How should I validate this case? Right now I added Javascirpt code to valid this. Is there anyway to do this like "Please specify other reason."?
<form name="myForm">
<div ng-app="myApp" ng-controller="myCtrl">
Reason : <select ng-model="reason" ng-options="x for x in names" required></select> <span ng-show="myForm.reason.untouched">The reason is required.</span>
<p>Others (specify): <input type="text" ng-model="others"></p>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["reason1", "reason2", "reason3","Others"];
$scope.addItem = function () {
if ($scope.reason == "Others" && !$scope.others)
{
window.alert("Please specify others");
}
if($scope.others && $scope.reason!='Others')
{
window.alert("Please select reason others");
}
});
</script>
Angular has an ng-required property that allows you to set it conditionally.
<form name="myForm">
<div ng-app="myApp" ng-controller="myCtrl">
Reason : <select ng-model="reason" ng-options="x for x in names" required>
</select> <span ng-show="myForm.reason.untouched">The reason is required.
</span>
<p>Others (specify): <input type="text" ng-model="others" ng-required="reason == 'Others'"></p>
</div>
</form>
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 have a radio button being selected like this:
<input type="radio" ng-model="lesson.sectionID" value="{{section.$id}}">
I want to bind the value of that input to another model, I tried the following:
<input type="text" ng-model="module.sectionID" ng-bind="lesson.sectionID">
and
<input type="text" ng-model="module.sectionID" ng-value="lesson.sectionID">
When I tried ng-value it set the text input to the correct value but the actual value of the model was not being set.
You can assign your model using
ng-model="module.sectionID"
ng-value="module.sectionID=lesson.sectionID"
You probably looking for this solution
angular.module('choices', [])
.controller("MainCtrl", ['$scope', function($scope) {
$scope.color = '';
$scope.colors = [
"Red",
"Green",
"Blue",
""
];
$scope.changeColor = function(){
$scope.color = "Red"
};
}]);
<html>
<head>
<body ng-app="choices" ng-controller="MainCtrl">
<div ng-repeat="color in colors">
<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color">
<label >
{{color || 'Other'}}
</label>
<input type="text" ng-model="$parent.color" ng-show="color==''">
</div>
<p></p>
The chosen color is <strong>{{color}}</strong>
<p></p>
<button ng-click="changeColor()">Change color</button>
</body>
</html>
I have the following code :-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl" ng-init="init()">
<div class="container" style="width:400px">
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="form-group">
<label for="selectedBasket">Select basket :</label>
<select id="selectedBasket" class="form-control" ng-model="selectedBasket" ng-options="b.name for b in baskets">
</select>
</div>
<div ng-repeat="f in fruits" class="checkbox">
<label>
<input type="checkbox" value="" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">
{{ f }}
</label>
</div>
</form>
</div>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.init = function() {
$scope.baskets = [{'name': 'mary', 'items': ['apple', 'orange']}, {'name': 'jane', 'items': ['banana']}];
$scope.fruits = ['apple', 'banana', 'cherry', 'orange', 'watermelon'];
$scope.selectedBasket = null;
};
});
</script>
</body>
</html>
if I select Mary or Jane, I can correctly see the correct items in their basket checked. However if I manually check all the fruits and then look at Mary or Jane, it doesn't exclude the items that are not in their baskets. Why is ng-checked failing?
Bonus question, is it best practise to set selectedBasket to null and checking for null in a directive assuming I want nothing as a default value, is there a better way?
You've got no ng-model in your checkbox so your manual action isn't registered anywhere.
ng-checked is only used to make a 'slave' checkbox it can take no manual action.
My guess is you should use a ng-model initialized to your ng-check value instead of using a ng-checked.
If you want to keep your ng-checked what you can do is :
<input type="checkbox" ng-click="selectedBasket.items.push(f)" ng-checked="selectedBasket !== null && selectedBasket.items.indexOf(f) !== -1">
in fact it's still wrong... must be tired, use a toogle function in your ng-click which add or remove the item should be better...
Had the same problem with ng-check, tried everything but nothing worked. I wanted to control the number of checked Items when clicked to 2, so I used the $Event sent with ng-click and disable it.
Here is a sample code:
<input type="checkbox" ng-click="toggleCheck($event, product._id);"
ng-checked="isChecked(product._id)">
$scope.toggleCheck($event, productId){
if ( $scope.featuredProducts.indexOf(productId) === -1) {
if ($scope.featuredProducts.length < 2) {
$scope.featuredProducts.push(productId);
}else {
$event.preventDefault();
$event.stopPropagation();
}
} else {
$scope.featuredProducts.splice( $scope.featuredProducts.indexOf(productId), 1);
}
}
$scope.isChecked(productId){
return ($scope.featuredProducts.indexOf(productId) !== -1);
}
I have a simple GUI I would like to implement via pure AngularJS - there are two (or more) groups of checkboxes like here: http://jsbin.com/cemitubo/2/edit
Here is the code from the link below:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<div class="group">
<input type="checkbox" ng-model="tag.aaa"/>
<input type="checkbox" ng-model="tag.ccc"/>
</div>
<div class="group">
<input type="checkbox" ng-model="tag.zzz"/>
</div>
{{tag}}
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.tag = {aaa: true};
});
Once A checkbox of one of the groups is checked all the checkboxes of the other groups should be unchecked (and the change obviously should be reflected in the model).
I tried to $watch the tag model variable and setting false to the variables of the other groups in $watch callback. The problem is that it fires the $watch callback each time tag is changed by $watch callback.
What is the proper AngularJS solution?
Thanks in advance!
Use ng-change instead $watch:
Something like:
$scope.changed = function(item, type){
console.log(item);
if((type == 'aaa' || type == 'ccc') ){
$scope.tag.zzz = !item;
}
else if(type == 'zzz'){
$scope.tag.aaa = !item;
$scope.tag.ccc = !item;
}
}
HTML
<div class="group">
<input type="checkbox" ng-model="tag.aaa" ng-change="changed(tag.aaa,'aaa')"/>
<input type="checkbox" ng-model="tag.ccc" ng-change="changed(tag.ccc,'ccc')"/>
</div>
<div class="group">
<input type="checkbox" ng-model="tag.zzz" ng-change="changed(tag.zzz, 'zzz')"/>
</div>
Demo JSBIN