I have a list of items with a checkbox, and i have delete button. The delete only works if the item in the list is checked.
So for example i have
$scope.list = [{
name:'Groceries',
check: false
}, {
name:'Laundry',
check:false
},
{
name:'Cleaning',
check:false
}];
and in my HTML
<ul>
<li ng-repeat="values in list">
<input type="checkbox" ng-model="values.check"/>
<span>{{values.name}}</span>
</li>
</ul>
<button>Delete</button>
This is just the snippet of the code i have the controller declared and bootstrapped with ng-app
You should use Angular native directive ng-checked
<input type="checkbox" ng-checked="values.check"/>
You can use a filter for this:
HTML
<body ng-app="app" ng-controller='Ctrl'>
<ul>
<li ng-repeat="values in list">
<input type="checkbox" ng-model="values.check"/>
<span>{{values.name}}</span>
</li>
</ul>
<button ng-click="remove((list | filter:{check:true}))">Delete</button>
</body>
Controller
$scope.remove = function(items) {
alert('removing ' + items.length + ' items');
$scope.list = $filter('filter')($scope.list, { check: false});
}
Demo Plunker
<body ng-controller="MyController">
<ul>
<li ng-repeat="values in list">
<input type="checkbox" ng-model="values.check" />
<span>{{values.name}}</span>
</li>
</ul>
<button ng-click="deleteItems()">Delete</button>
</body>
controller:
myApp.controller('MyController', function($scope, $filter) {
$scope.list = [ {
name : 'Groceries',
check : false
}, {
name : 'Laundry',
check : false
}, {
name : 'Cleaning',
check : false
} ];
$scope.deleteItems = function() {
$scope.list = $filter('filter')($scope.list, {check : false})
}
})
Related
Hi all I am new to angularjs could anybody help me please? All what I need when I click a button the first checkbox in ng-repeat list to be checked. Am I doing anything wrong? Here is my code:
Checkbox
<fieldset class="top5">
<legend title="Categories"><span class="info blackLabelUpper"><b>Dish Categories</b><span class="TextCtrlReqBgImage"> </span></span></legend>
<span class="checkbox-list" ng-repeat="dishType in dishTypes">
<input type='checkbox' ng-click="toggleDishType(dishType)" ng-model="dishType.checked" value="{{dishType}}" ng-checked="selectedDish.Type.indexOf(dishType) > -1">
{{dishType}}<br />
</span>
</fieldset>
Button
<kendo-button id="btnNewDish" class="k-primary" ng-click="onNewDishClick(true)">
<i class="fa fa-plus fa-lg" aria-hidden="true"></i>New Dish
</kendo-button>
Function
scope.onNewDishClick = function (showNewDIshMessage) {
scope.dishTypes[0].dishType = true;
}
When you use ng-model on your inputs you don't need to use value to get result because ng-model save changes on self.
Feel free to ask question, and this sample maybe helps you.
var app = angular.module("app", []);
app.controller('ctrl', function($scope){
$scope.items = [
{somthing: false, title: 'a'},
{somthing: false, title: 'b'},
{somthing: false, title: 'c'},
{somthing: false, title: 'd'},
{somthing: false, title: 'e'}
]
$scope.checkAll = function(){
angular.forEach($scope.items, function(item){
item.somthing = !item.somthing;
});
}
$scope.checkFirstItem = function(){
$scope.items[0].somthing = !$scope.items[0].somthing;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.somthing">
{{item.somthing}}
{{item.title}}
</li>
</ul>
<button ng-click="checkAll()">check all</button>
<button ng-click="checkFirstItem()">check first item</button>
</div>
<div ng-repeat="restorent_type in restaurant_types" style="margin:5px;" class="col col-offset-10">
<label class="item item-radio radio-label {{restorent_type.RESCOD}}">
<input type="checkbox" name="group" ng-model="restorent.types" value="{{restorent_type.RESCOD}}" ng-click="filters.RESCOD = restorent_type.RESCOD" ng-checked="$first">
<div class="item-content">
{{restorent_type.RESCOD}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
Or you can use the :
ng-model="dishType.checked" ng-init="dishType.checked=true"
I think the Function definition should be like this :
scope.onNewDishClick = function (showNewDIshMessage) {
scope.dishTypes[0].checked = true;
}
I can't seem to figure out how to have another checkbox that selects all and deselects all boxes.
JSFIDDLE
<div ng-controller="tempCtrl">
<input type="checkbox" ng-model="selectAllOptions" ng-click="selectAll()" /> Select/Deselect All
<li ng-repeat="t in parameters.myMainOptions.teams">
<input ng-model="form.selectedTeams[t]" type="checkbox" />{{t}}</li>
<button class="btn btn-sm" type="submit" ng-click="submit(form)">SUBMIT</button> <pre>
{{form.selectedTeams}}
</pre>
</div>
var myApp = angular.module('myApp', []);
myApp.controller("tempCtrl", function ($scope) {
$scope.form = {
selectedTeams: {}
};
$scope.parameters = {
myMainOptions: {
teams: ['angels', 'giants', 'orioles', 'bluejays', 'athletics']
}
};
$scope.selectAll = function() {
//This is where I'm stuck
}
});
Here's a working plunkr of a simple select/deselect all checkbox:
plunkr
Controller
$scope.checkboxes = [
{
selected: false
},
{
selected: false
},
{
selected: false
}
];
// Check/uncheck all boxes
$scope.checkAll = function () {
angular.forEach($scope.checkboxes, function (obj) {
obj.selected = $scope.selectAll;
});
};
View
<p>Check all</p>
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<br />
<p>Checkboxes</p>
<div ng-repeat="checkbox in checkboxes track by $index">
<input type="checkbox" ng-model="checkbox.selected" />
<label ng-show="checkbox.selected">Checkbox {{ $index+1 }} selected!</label>
</div>
First, you should make teams an array of objects like this
Controller:
$scope.parameters = {
myMainOptions: {
teams: [{name: 'angels'}, {name: 'giants'}, {name: 'orioles'}, {name:'bluejays'}, {name: 'athletics'}]
}
};
This is a better approach because, now, you can add a selected attribute to each team object.
Then you should set ng-model for each team checkbox to something like team.selected like this:
View:
<li ng-repeat="team in parameters.myMainOptions.teams">
<input ng-model="team.selected" type="checkbox" />
{{team}}
</li>
Now, if you check the angels checkbox, the object will change to {name: 'angels', selected: true}
Then your selectAll function will look like this:
Controller:
$scope.selectAll = function () {
angular.forEach($scope.parameters.myMainOptions.teams, function (team) {
team.selected = $scope.selectAllOptions;
});
};
You could do forEach on $scope.parameters.myMainOptions.teams array and then set $scope.form.selectedTeams value in the loop. Also use ng-change instead of ng-click.
Markup
<input type="checkbox" ng-model="selectAllOptions" ng-change="selectAll()" />Select/Deselect All
<li ng-repeat="t in parameters.myMainOptions.teams">
<input ng-model="form.selectedTeams[t]" type="checkbox" />{{t}}</li>
<button class="btn btn-sm" type="submit" ng-click="submit(form)">SUBMIT</button> <pre>
{{form.selectedTeams}}
</pre>
Code
$scope.selectAll = function () {
angular.forEach($scope.parameters.myMainOptions.teams, function (value, index) {
$scope.form.selectedTeams[value] = $scope.selectAllOptions; //setting selectAll variable value
})
}
Working Fiddle
Using Angular JS, I have this object
var pages = [
{ name: 'users', title : "Users" },
{ name: 'roles', title : 'Roles' }
];
I'm trying to create a page for user roles. For that I need 4 checkboxes for each page. Each page must have 4 rules. Access, show, edit, delete.
Displaying pages in a ng-repeat
<div ng-controller='PageCtrl'>
<ul>
<li ng-repeat='page in pages'>
{{ page.title }}
<input type="checkbox" name="access"> Access
<input type="checkbox" name="show"> Show
<input type="checkbox" name="edit"> Edit
<input type="checkbox" name="delete"> Delete
</li>
</ul>
</div>
So I need to pass those checkboxes values to the $scope. How can I bind a model for each checkbox?
Like this
<input type="checkbox" name="access" ng-model='page.name+_access'> Access
Checkbox model name should start with page.name. Like users_access, users_show...
You can use the following syntax:
ng-model="page[page.name+'_access']"
But as a matter of fact, it looks one can move those groups into controller as well, then use another ng-repeat. Like this:
HTML:
<div ng-controller="PageCtrl">
<ul>
<li ng-repeat='page in pages'>{{ page.title }}
<label ng-repeat="right in rights">
<input type="checkbox" ng-model="page[page.name + '_' + right]" name="{{right}}" />{{right|capitalize}}</label>
<button ng-click="log(page)">Log</button>
</li>
</ul>
</div>
JS:
var module = angular.module('myAp', [])
.controller('PageCtrl', ['$scope', function ($scope) {
$scope.pages = [{
name: 'users',
title: "Users"
}, {
name: 'roles',
title: 'Roles'
}];
$scope.rights = ['access', 'show', 'edit', 'delete'];
$scope.log = function (page) {
console.log(page);
}
}]).filter('capitalize', function() {
return function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
};
});
Demo.
Hello Everyone I have face a problem to create a object with ng-repeat. when i declare the Object then the same value in filled in the text box which has same ng-model value. if i am not Declare the object then duplicacy is not occures.
If i am declare the $scope.user = {}; in js file then problem is occures. please check this. Give me a solution ASAP.
My Fiddle Link Please Check This http://jsfiddle.net/Ladjkp5s/1/
Here is my Html file
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item + 1}}
<div>
Name: <input type="text" ng-model="user.name"><br>
Address: <input type="text" ng-model="user.add"><br>
Phone: <input type="text" ng-model="user.phn"><br>
ZipCode: <input type="text" ng-model="user.zip">
</div>
</li>
</ul>
</div>
</div>
Here is my JS File
var app = angular.module('myApp', []);
app.filter('slice', function() {
return function(arr, start, end) {
return arr.slice(start, end);
};
});
app.controller('MainController', function($scope) {
$scope.items = [];
$scope.user ={};
for (var i = 0; i < 5; i++) $scope.items.push(i);
});
Thanks.
The problem is that you are using same ng-model for every item.(user.fieldName) you have to use item.fieldName.
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item.index + 1}}
<div>
Name: <input type="text" ng-model="item.name"><br>
Address: <input type="text" ng-model="item.add"><br>
Phone: <input type="text" ng-model="item.phn"><br>
ZipCode: <input type="text" ng-model="item.zip">
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/3akwk7tv/
Yuu can not loop in controller function, but u can create controller that loops in html like in this example
<ul>
<li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ul>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
});
</script>
I try to play around with some test in angular. but failed to add item in a todo list app sample:
app.controller('MainControl', function($scope){
$scope.tasks = [
{
"name":"task 1",
},
{"name":"task 2",
}
];
var addTask = function(){
$scope.tasks.push({
"name": $scope.input,
});
$scope.input = "";
};
});
I wonder why it doesn't work, no error in the console.
my html
<body ng-controller="MainControl">
<div>
<label>I want to:</label>
<input type="text" ng-model="input">
<button ng-click="addTask()">Add</button>
</div>
<div>
<ul ng-repeat="task in tasks">
<li>{{task.name}}</li>
</ul>
</div>
</body>
addTask must be a $scope property, i.e. $scope.addTask = function() {} instead of var addTask = function() {}.
Edit after comments:
<form ng-submit="addTask()">
<label>I want to:</label>
<input type="text" ng-model="input">
<button type="submit">Add</button>
</form>