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>
Related
i am working with dynamic forms with ng-repeat .i am getting dynamic forms according to my userid. each form has delete button. my requirement is once i am clicking delete button i need to delete that particular form and those values from my user obj and remaining values i need to send to server. in this example i want to delete id 2 (2nd form), and 1st and 2nd form data i need to store one variable.
please send some fiddle for this .
my html code
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Location</label>
<select ng-model="user.location" ng-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>
</select>
</div>
<div>
<button>delete</button>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
js file
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2, 3];
$scope.users = $scope.ids.map(function(id) {
return {
id: id,
comment: "",
location: ""
};
});
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.initLocation = (user) => {
$timeout(() => {
user.location = $scope.locations[0];
});
}
$scope.adduser = function() {
var data = $scope.users.map(function(user) {
return {
"userid": user.id,
"manualcomment": user.comment,
"location": user.location
}
});
console.log("data", data)
}
});
As per your requirement i am adding ng-click to delete button and adding removeSelForm method and pass your user object into that function parameter. in controller i am removing that particular form values from users object.
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope, $timeout) {
$scope.ids = [1, 2, 3];
$scope.users = $scope.ids.map(function(id) {
return {
id: id,
comment: "",
location: ""
};
});
$scope.locations = ['india', 'usa', 'jermany', 'china', 'Dubai'];
$scope.initLocation = (user) => {
$timeout(() => {
user.location = $scope.locations[0];
});
}
$scope.removeSelForm = function(item) {
var index = $scope.users.indexOf(item)
$scope.users.splice(index, 1);
}
$scope.adduser = function() {
var data = $scope.users.map(function(user) {
return {
"userid": user.id,
"manualcomment": user.comment,
"location": user.location
}
});
console.log("data", data)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="user in users">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="user.id" id="user.id" name="user.id" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Location</label>
<select ng-model="user.location" ng-options="v for v in locations" ng-init='initLocation(user)' name="select2" required>
</select>
</div>
<div>
<button ng-click="removeSelForm(user)">delete</button>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser" ng-click="adduser()">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
//Adding New Check# and Check amount Text Boxes
$scope.texs = [{id: 'tex', value: 'tex1'}];
$scope.add = function() {
var newItemNo = $scope.texs.length+1;
$scope.texs.push({'id':'tex'+newItemNo});
};
//Removing Last Check# and Check amount Text Boxes
$scope.remove = function() {
var lastItem = $scope.texs.length-1;
$scope.texs.splice(lastItem);
};
});
<!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">
<div class="col-md-12">
<div class="col-md-6">
<div ng-repeat="tex in texs">
<div class="form-group">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="tex.id" ng-model="tex.id" maxlength="6"></input>
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
</div>
<div class="col-md-6">
<label>{{tex.id}}</label>
</div>
</body>
</html>
Above i mentioned my code. here If i did not use the ng-repeat="tex in texs",the label tex and texNo is displaying the value once i entered the values in input. But If I did use the ng-repeat="tex in texs", the value is not displayed. I know the code is wrong,but what i want is If i click Add More and entered the values of the second tex and texNo, I want to display the both of values of tex and texNo in the Label.
please suggest me with something.
The tex.id contains a string tex whereas ng-model is expecting a number.
You can use dynamic keys and provide an initial value to it
Inside controller
$scope.texs = [{'id1': 1}];
$scope.add = function() {
var newItemNo = $scope.texs.length+1;
$scope.texs.push({['id'+newItemNo]:1});
};
Inside HTML
<div ng-repeat="tex in texs">
<div class="form-group">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="{{'id'+($index+1)}}" ng-model="tex['id'+($index+1)]" maxlength="6" />
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
</div>
<button type="button"
ng-click="add()">Add More</button>
</div>
FIDDLE
So, you need to use:
$scope.texs = [{id: 'tex', value: 'tex1'}];
And in HTML:
<div class="form-group"">
<label>tex:</label>
<div class="col-md-5">
<input type="number" class="form-control" id="{{tex.id}}" ng-model="tex.id" maxlength="6"></input>
</div>
<button ng-show="$last"
ng-click="remove()">-</button>
</div>
<div class="form-group">
<label>tex No:</label>
<div col-md-5">
<input type="number" class="form-control" id="{{tex.value}}" ng-model="tex.value" maxlength="9"></input>
</div>
</div>
</div>
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 repeating a list of tasks that I would like other users to be able to comment on using an input field. I repeat the list with ng-repeat and am trying to send the value of the comment input to the server with ng-model and scope. I am testing by console logging but it shows as undefined. Please help!
Html:
<div class="taskContainer">
<div ng-repeat='task in taskList' class="task">
<div class="postedBy">
<h6>{{task.user.userName}}</h6>
</div>
<h4>{{task.taskText}}</h4>
<div class="comments">
<input ng-model="newComment" type="text" placeholder="comments">
<button ng-click='comment(task.taskId)' type="button" name="button">Add</button>
<h6>{{task.commentText}}</h6>
</div>
</div>
</div>
JS controller:
$scope.comment = function(id,text){
console.log(`send comment text ${$scope.newComment}`);
console.log(`task Id: ${id}`);
};
This is the first time I've tried to do more than display itmes with ng-repeat
You're getting undefined because ngRepeat creates its own $scope.
Always assign ngModel using Dot Rule or controller-as-syntax.
Put it in your controller:
$scope.model = {};
Then use the ngModel as this:
<input ng-model="model.newComment[$index]" type="text" placeholder="comments">
Then you can have something like this:
<div class="taskContainer">
<div ng-repeat="task in taskList track by $index" class="task">
<div class="postedBy">
<h6>{{task.user.userName}}</h6>
</div>
<h4>{{task.taskText}}</h4>
<div class="comments">
<input ng-model="model.newComment[$index]" type="text" placeholder="comments">
<button ng-click='comment($index)' type="button" name="button">Add</button>
<h6>{{task.commentText}}</h6>
</div>
</div>
</div>
$scope.comment = function(index) {
console.log(`send comment text ${$scope.model.newComment[index]}`);
console.log(`task Id: ${taskList[index].id}`);
};
Note: Your function is expecting 2 parameters, you should change it to:
$scope.comment = function(id) {
Thanks for the help from #developer033.
Here is what solved my problem:
HTML:
<div class="taskContainer">
<div ng-repeat="task in taskList track by $index" class="task">
<div class="postedBy">
<h6>{{task.user.userName}}</h6>
</div>
<h4>{{task.taskText}}</h4>
<div class="comments">
<input ng-model="model.newComment[$index]" type="text" placeholder="comments">
<button ng-click='comment(task.taskId,$index)' type="button" name="button">Add</button>
<h6>{{task.commentText}}</h6>
</div>
</div>
</div>
and the JS:
$scope.model = {};
$scope.comment = function(id, index) {
console.log(`send comment text ${$scope.model.newComment[index]}`);
console.log(`task Id: ${id}`);
};
HTML,
<input ng-model="newComment" type="text" placeholder="comments">
<button ng-click='comment(task.taskId, newComment)' type="button" name="button">Add</button>
JavaScript,
$scope.comment = function(id, text) {
console.log(`task Id: ${id}`);
console.log(`send comment text ${text}`);
};
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