I have the following example (jsFiddle). What I will do is, if radiobuttons are clicked than all checkboxes should be deselected and if one or more checkboxes are clicked than all radiobuttons should be deselected.
My question now would be how to make this (in a simple way).
angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.select = function(type) {
alert('type: ' + type);
}
// functions to deselect checkboxes if a radiobutton is selected and vica verse
}]);
thanks a lot for help!
My Example
I can suggest using ng-checked documentation.
You can check this fiddle.
<body ng-app="myApp">
<div ng-controller="TestController">
<ul class="list-group">
<li class="list-group-item">
<input type="radio" name="test1" ng-checked="radio" ng-click="selectRadio()"/>
<span class="username">
Alle von Test1
</span>
</li>
<li class="list-group-item">
<input type="radio" name="test1" ng-checked="radio" ng-click="selectRadio()"/>
<span class="username">
Alle von Test2
</span>
</li>
</ul>
<input type="checkbox" value="Test3" ng-checked="check" ng-click="selectCheck()" />Test3<br />
<input type="checkbox" value="Test4" ng-checked="check" ng-click="selectCheck()" />Test4<br />
<input type="checkbox" value="Test5" ng-checked="check" ng-click="selectCheck()" />Test5<br />
</div>
</body>
I am a little bit late to answer your question. I think this is what you are looking for.
JSFiddle: https://jsfiddle.net/bx79afyq/2/
HTML:
<div ng-controller="TestController">
<ul class="list-group">
<li class="list-group-item">
<input type="radio" name="test1" ng-click="select('radio')"/>
<span class="username">
Alle von Test1
</span>
</li>
<li class="list-group-item">
<input type="radio" name="test1" ng-click="select('radio')"/>
<span class="username">
Alle von Test2
</span>
</li>
</ul>
<input type="checkbox" value="Test3" ng-click="select('checkbox')" />Test3<br />
<input type="checkbox" value="Test4" ng-click="select('checkbox')" />Test4<br />
<input type="checkbox" value="Test5" ng-click="select('checkbox')" />Test5<br />
</div>
JavaScript
angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
$scope.select = function(type) {
var data = angular.element('input');
if(type==='radio'){
angular.forEach(data, function(value, key) {
if(value.type==='checkbox' && angular.element(value).prop("checked")){
angular.element(value).prop("checked", false);
}
});
}
else if(type==='checkbox'){
angular.forEach(data, function(value, key) {
if(value.type==='radio' && angular.element(value).prop("checked")){
angular.element(value).prop("checked", false);
}
});
}
}
}]);
I would suggest using models for your inputs in your JavaScript like this:
angular.module('myApp', [])
.controller('TestController', ['$scope', function($scope) {
this.radioBtns = {
test1: false,
test2: false
}
this.checkboxBtns = {
test3: false,
test4: false,
test5: false
}
this.deselect = function(type) {
angular.forEach( this[ type ], function( el,name ) {
this[ type ][ name ] = false;
}.bind(this));
}
}]);
And after that adjust html accordingly as shown in the fiddle:
https://jsfiddle.net/zz5z6dor/11/
Related
Hi I have problem in adding form field and binding inside the ng-repeat
my form is like this
<div ng-repeat="(key, value) in categories">
<div class="col-sm-12"><b>{{ value.name }}</b></div>
<div class="col-sm-12" >
<div class="col-sm-3">
<label>Product</label>
<input
type="text"
class="form-control input-sm"
ng-model="product.name">
</div>
<div class="col-sm-1">
<label> </label>
<button type="button" ng-hide="$first" ng-click="removeProduct()">-</button>
</div>
</div>
<div class="col-sm-1">
<button type="button" ng-click="addNewProduct()">+</button>
</div>
</div>
json categories
[{"id":1,"name":"Furniture & Fixture"},
{"id":2,"name":"Miscellaneous Property"},
{"id":3,"name":"Office Equipment"},
{"id":4,"name":"Renovation"},
{"id":5,"name":"Vehicle"}]
Here I want to add dynamic form fields(products) for each category
my js is like this
$scope.addNewProduct = function(){
$scope.categories.push({});
}
$scope.removeProduct= function(index){
$scope.categories.splice(index,1);
}
i know its won't work i need to push data to each category.please help
Your function for adding new category should look like this:
$scope.addNewProduct = function(){
var newCategory=
{
id:$scope.categories.length+1,
name:$scope.product.name
}
$scope.categories.push(newCategory);
}
Following code will demo how to append 'item' to items list:
<script>
angular.module('AddItemToList', [])
.controller('FormController', ['$scope', function($scope) {
$scope.item = '';
$scope.items = [];
$scope.submit = function() {
if (typeof($scope.item) != "undefined" && $scope.item != "") {
// append item to items and reset item
$scope.items.push($scope.item);
$scope.item = '';
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="FormController">
Input item and Submit the form. This will get appended to the list:
<input type="text" ng-model="input" name="item" />
<input type="submit" id="submit" value="Submit" />
<pre>Final List={{items}}</pre>
</form>
I am having trouble finding a solution that allows me to simply uncheck all checkboxes using AngularJS. I use a simple ng-repeat to make checkboxes and want a button to clear them all.
<div class="form-group"> <!-- Checkbox Group !-->
<label class="control-label">What are your requirements</label>
<div class="checkbox" ng-repeat="block in blocks">
<label>
<input type="checkbox" ng-model='myModel' name="block" value="block" ng-change="filter(block)">
{{block}}
</label>
</div>
</div>
<div>
<input type="button" class="btn btn-primary " name="Clear" ng-click="reset()" value="Reset"> </input>
</div>
I have tried altering the ng-model a few times, but keep getting errors since I use the ng-change function. Is there any way I can make a function called reset() in the controller to clear all the checkboxes (even if it is in a for loop iterating through each one by name)?
For referense
$scope.blocks = ["Lambda","Tokenization","Hadoop"];
<div ng-controller="checkboxController">
<ul>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
<input type="button" value="UnCheck All" ng-click="checkAll(Items.length)" />
</div>
var app=angular.module("CheckAllModule", []);
app.controller("checkboxController", functioncheckboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function (Count) {
angular.forEach($scope.Items, function (item) {
item.Selected = false;
});
};
});
Check with this.I think this will help you
Demo Link
Try this method.
var app = angular.module('plunker', []);
app.controller('mainCtrl', function($scope) {
$scope.blocks = ["Lambda","Tokenization","Hadoop"];
$scope.checkBlocks = [];
$scope.filter = function(b){
}
$scope.reset= function(){
$scope.checkBlocks = [];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="mainCtrl">
<div class="form-group"> <!-- Checkbox Group !-->
<label class="control-label">What are your requirements</label>
<div class="checkbox" ng-repeat="block in blocks">
<label>
<input type="checkbox" ng-checked="checkBlocks[block]" ng-model='checkBlocks[block]' name="block" value="block" ng-change="filter(block)">
{{block}}
</label>
</div>
</div>
<div>
<input type="button" class="btn btn-primary " name="Clear" ng-click="reset()" value="Reset"> </input>
</div>
</body>
I get the correct record from the firebase array using the $getRecord but I can not save the changes made in the input fields. Our Add Controller works. What have we done wrong? Can anyone help? Thank you!
Edit Controller
app.controller("EditRecipeController", function($scope, $location, $routeParams, $firebaseArray) {
$scope.recipes.$loaded().then(function(recipeid) {
$scope.recipe = recipeid.$getRecord($routeParams.id);
$scope.editRecipe = function(recipe) {
$scope.recipes.$save(recipe).then(function() {
})};});});
Add Controller
app.controller("AddRecipeController", ["$scope", "createRecipes", function($scope, createRecipes) {
$scope.recipes = createRecipes;
$scope.addRecipe = function() {
$scope.recipes.$add({
title: $scope.title,
lead: $scope.lead,
keyword: $scope.keyword,
ingredient: $scope.ingredient,
instructions: $scope.instructions
});
alert("Your recipe has been succefully saved!")
// reset the recipe input
$scope.recipe = "";
};}]);
Factory
app.factory("createRecipes", ["$firebaseArray",function($firebaseArray) {
var ref = new Firebase("https://fiery-inferno-8595.firebaseio.com/recipes/");
return $firebaseArray(ref);}]);
HTML
<section id="{{recipe.$id}}" class="recipe-description editor">
<form ng-submit="addRecipe()">
<section class="headColumn">
<div class="mySearch">
<span>My search: </span>
<span ng-bind="search.$"></span>
</div>
<h2>
<input type="text" ng-model="title" name="recipeTitle" ng-value="recipe.title" required="">-
<input type="text" ng-model="lead" name="recipeLead" ng-value="recipe.lead" required="">
</h2>
<ul class="keywords">
<li><label></label>Categories: </li>
<li ng-repeat="keyword in keywords track by $index">
<input type="text" ng-model="keywords[$index]" name="recipeKeyword" ng-value="recipe.keywords" placeholder="Add a keyword">
<button class="remove-field" ng-show="$last" ng-click="removeKeyword()">-</button>
</li>
<button class="add-field" ng-click="addKeyword()">+</button>
</ul>
</section>
<section class="sideColumn">
<h4>Ingredients</h4>
<ul class="ingredients">
<li ng-repeat="ingredient in ingredients track by $index">
<input type="text" ng-model="ingredients[$index]" name="recipeIngredient" ng-value="recipe.ingredients" placeholder="Add an ingredient">
<button class="remove-field" ng-show="$last" ng-click="removeIngredient()">-</button>
</li>
<button class="add-field" ng-click="addIngredient()">+</button>
</ul>
</section>
<section class="mainColumn">
<div class="readytime">
<h4>Time until ready</h4>
<ul>
<li>
<span>Preperation Time: </span>
<input type="text" ng-model="preptime" name="recipePreptime" ng-value="recipe.preptime" placeholder="Add preperation Time">
</li>
<li>
<span>Cooking Time: </span>
<input type="text" ng-model="cookingtime" name="recipeCookingtime" ng-value="recipe.cookingtime" placeholder="Add cooking Time">
</li>
</ul>
</div>
<div class="instructions">
<h4>Instructions</h4>
<!--TO DO: This input should work like textarea -->
<input type="text" ng-model="instructions" name="recipeInstructions" ng-value="recipe.instructions">
</div>
</section>
<button ng-click="addRecipe()" ng-hide="recipe" type="submit">Save the Recipe</button>
<button ng-click="editRecipe()" type="submit" ng-show="recipe">Update the Recipe</button>
</form>
You're edit function:
$scope.editRecipe = function(recipe){
$scope.recipes.$save(recipe).then(function(){});
}
is expecting the "recipe" to be passed in, but I don't see it being passed in anywhere. It looks like you are saving the current recipe to:
$scope.recipe
so if $scope.recipe has the correct object, I think you just have to save the scoped recipe opposed to passing it in.
$scope.editRecipe = function(){
$scope.recipes.$save($scope.recipe).then(function(){});
}
I need to get all options of a multiple select using angularjs, there are selected or not. The options are dynamic. No always the select have the same options.
HtML:
<div class="row">
<div class="form-group col-xs-5">
<label>Select 1</label>
<select multiple="multiple" class="form-control" id="origen" name="origen[]">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div class="form-group col-xs-2 buttoms-left-right">
<p>
<br />
<button type="button" class="btn btn-default" id="goright"><span class="glyphicon glyphicon-chevron-right"></span></button>
</p>
<p>
<button type="button" class="btn btn-default" id="goleft"><span class="glyphicon glyphicon-chevron-left"></span></button>
</p>
</div>
<div class="form-group col-xs-5">
<label>Select 2</label>
<select multiple="multiple" class="form-control" id="destino" name="destino[]" ng-model="formData.tags"></select>
</div>
</div>
I have e jquery that pass data from select 1 to select 2. I need all select 2 options, but using angularjs
jQuery(document).ready(function(){
jQuery('#goright').click(function() { return !jQuery('#origen option:selected').remove().appendTo('#destino'); });
jQuery('#goleft').click(function() { return !jQuery('#destino option:selected').remove().appendTo('#origen'); });
});
And in angularjs I have:
angular.module('formDS', ['ngAnimate', 'ui.router'])
// router configurations
.controller('formDSController', function($scope, $http) {
$scope.formData = {};
$scope.processForm = function() {
console.log($scope.formData.tags); //return undefined
};
// other code
});
You need to store the option values in your controllers $scope.
Plunker
<label>Select 1</label>
<select multiple="multiple" class="form-control" id="origen" name="origen[]">
<option ng-repeat="opt in select1">{{opt}}</option>
</select>
....
<label>Select 2</label>
<select multiple="multiple" class="form-control" id="destino" name="destino[]" ng-model="select2">
<option ng-repeat="opt in select1">{{opt}}</option>
</select>
Controller:
app.controller('MainCtrl', function($scope) {
$scope.select1 = ['A', 'B', 'C'];
});
Absolutely no reason to use jQuery.
You can specify all options values inside controller. and use ng-options directive for displaying it in your select element.
You can get all available options in $scope.list in controller only.
See the below example.
var app = angular.module('app', []);
app.controller('crtl', function($scope) {
$scope.list = ['A', 'B', 'C'];
$scope.selectedValue = 'A';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="crtl">
<select ng-options="item as item for item in list" ng-model="selectedValue"></select>
</div>
</div>
ng-options docs
I need to change ng-Disabled value for one separate input which i show by ng-repeat directive.
I have:
<li ng-repeat="lang in langs">
<label> <input
type="radio"
name="language"
ng-disabled="isDisabled"
ng-model="langs.name"
ng-value="$index"
ng-change="getIndex($index)"
/>
<span> {{lang.name}} </span>
</label>
</li>
How to do something like that:
$scope.langs[0].ngDisabled = true;
Thanks.
You could allow a property 'isDisabled' to be added to your model:
<li ng-repeat="lang in langs">
<label> <input
type="radio"
name="language"
ng-disabled="lang.isDisabled"
ng-model="lang.name"
ng-value="$index"
ng-change="getIndex($index)"
/>
<span> {{lang.name}} </span>
</label>
</li>
Then you can do:
$scope.langs[0].isDisabled = true;
Alternatively, if you don't want to mutate your model, you could do the following instead:
Controller:
var app = angular.module("app", []);
app.controller('Ctrl', function ($scope) {
$scope.isDisabled = {};
$scope.langs = [
{ name: 'French' },
{ name: 'English' },
{ name: 'German' },
{ name: 'Chinese' },
{ name: 'Dutch' }
];
});
HTML
<body ng-app="app" ng-controller='Ctrl as ctrl'>
<ul>
<li ng-repeat="lang in langs">
<label>
<input
type="radio"
name="language"
ng-disabled="isDisabled[lang.name]"
ng-model="ctrl.selectedLanguage"
ng-value="lang.name"
/>
<span> {{lang.name}} </span>
</label>
</li>
</ul>
<br />
{{ ctrl.selectedLanguage }} <br />
{{ isDisabled }}
</body>
Then you can do:
$scope.isDisabled[$scope.langs[0].name] = true;
Plunker Demo