I am trying to include a check all for my todo list, but once I hit toggleAll() it gets unchecked right away, plus it unchecks whichever one is already checked.
I really couldn't figure out why this behavior, perhaps some other things in the page are interfearing. A simple version of what I have included here is in this jsfiddle http://jsfiddle.net/TKVH6/487/ and it is working.
<section id="main">
<input id="toggle-all" type="checkbox" ng-model="checkAll" ng-click="toggleAll()">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos" ng-class="{'completed': todo.isCompleted=='true'}" class="editing">
<div class="view" >
<input class="toggle" type="checkbox" ng-click="complete(todo)" ng-model="todo.isCompleted" ng-checked="todo.isCompleted" ng-true-value="'true'" ng-false-value="'false'">
<label ng-hide="isEditing" ng-dblclick="isEditing = !isEditing">{{todo.title}}</label>
<button class="destroy" ng-click="remove(todo)"></button>
</div>
<input class="edit" ng-show="isEditing" ng-model="todo.title" ng-blur="isEditing = !isEditing;edit(todo);">
</li>
</ul>
</section>
Controller
$scope.toggleAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.todos, function (todo) {
todo.isCompleted = $scope.selectedAll;
});
};
EDIT 1
$scope.toggleAll = function() {
for(i in $scope.todos) {
$scope.todos[i].isCompleted = $scope.checkAll;
}
};
Any help is appreciated.
SOLVED! Treating the boolean as string solved it. That is because the server saves the boolean values as strings.
$scope.toggleAll = function() {
for(i in $scope.todos) {
$scope.todos[i].isCompleted = "" + $scope.checkAll;
}
};
At this point ng-checked="{{todo.isCompleted}} needs to be back since it is not a boolean.
Related
Having the following HTML:
<div ng-repeat="phone in user.phones">
<input type='text' value='{{phone}}' ng-model="phone" ng-blur="phoneBlur()"/>
</div>
and the following code:
$scope.phoneBlur = function() {
const newPhones = $scope.user.phones.filter((item) => item != '');
if(newPhones.length !== $scope.user.phones.length) {
$scope.user.phones = newPhones;
}
}
The if statement is never called. The idea is removing blank phones from the array and their inputs.
I've got a list with todo's, in that list I can check them if they are done.
If they are done I want to remove them from my list with angularJS.
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} van de {{todoList.todos.length}} nog te doen</span>
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form name="formaddtodo" ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" ng-minlength="1" size="30"
placeholder="Voeg nieuwe todo toe" required>
<input class="btn-primary" type="submit" value="voeg toe">
</form>
<input class="btn-danger" type="button" value="verwijder" ng-click="todoList.removeItem()">
</div>
</body>
with the removeItem function I want to delete the checked items from the list.
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [{text:'learn AngularJS', done:false},
{text:'build an AngularJS app', done:false}];
todoList.addTodo = function () {
todoList.todos.push({text: todoList.todoText, done: false});
todoList.todoText = '';
};
todoList.remaining = function () {
var count = 0;
angular.forEach(todoList.todos, function (todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.removeItem = function() {
todoList.todos.splice(???)
}
});
It would be awesome if someone can explain it to me!
todoList.removeItem = function() {
angular.forEach(todoList.todo, function(todo, key) {
if(todo.done)
todoList.todos.splice(key, 1);
});
}
You can use underscore filter
todoList.removeItem = function() {
todoList.todos = _.filter(todoList.todos, function(todo) {
return !todo.done;
});
}
You could store your todos in a new array and empty the current array and only add back todos that aren't done something like this?:
todoList.removeItem = function() {
var oldTodos = toDoList.todos;
toDoList.todos =[];
angular.forEach(oldTodos, function(todo){
if (!toDoList.todos.done)
toDoList.todos.push(todo);
});
}
I have a div with ng-repeat:
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="this.value" ng-checked="false">{{fruit.code}} - {{fruit.short_name}}
</div>
Here furits is array object and which contains the field code, short_name.
furits: {
{
code : code_value1,
short_name :short_name_value1
},
{
code : code_value2,
short_name :short_name_value2
},...
{
code : code_value..,
short_name :short_name_value..
},
}
I would like to get the code of checked checkbox after submit button click and insert those codes in new array.
And also send the same array to server to complete the task.
Please help me to solve this issue.
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="fruit.isSelected" />{{fruit.code}} - {{fruit.short_name}}
</div>
<input type="button" ng-click="sendServer()" value="Submit" />
And your controller methods are like ,
$scope.sendServer = function(){
$scope.checkedFruits = [];
for(i = 0; i < $scope.fruits.length; ++i){
if ($scope.fruits[i].isSelected)
$scope.checkedFruits.push(fruit.code);
}
$scope.postData();
}
//Send array to server via web service with parameter FruitsCode
$scope.postData = function () {
$http.post('http://your.webservice/', {FruitsCode:$scope.checkedFruits}).success(
function(data){
$scope.response = data
})
}
Hopes this will help you !
<div ng-repeat="fruit in fruits">
<input type="checkbox" ng-model="fruit.isChecked" />{{fruit.code}} - {{fruit.short_name}}
</div>
<input type="button" ng-click="save()" value="SAVE" />
And inside your controller :
$scope.save = function(){
var myFruits = [];
for(i = 0; i < $scope.fruits.length; ++i){
if ($scope.fruits[i]. isChecked)
myFruits.push(fruit.code);
}
}
I'm new in AngularJS. Please have look to this:
Now when user clicks on "All" link, all the 11 check boxes should be checked and when user clicks on "None" link, all the 11 check boxes should be unchecked.
Plus when user check the All others check box, all the bottom 9 check boxes should be checked and when user uncheck the All others check box, all the bottom 9 check boxes should be unchecked.
I'm able to achieve one of the task at a time, but not simultaneously.
So, can anybody please help me to achieve both the tasks simultaneously?
Any help would be appreciated.
You can use
HTML
<body ng-controller="MainCtrl">
<button ng-click="selectAll()">Select All</button>
<button ng-click="clearAll()">Clear All</button>
<input type="checkbox" ng-model="select" ng-click="checkAll()" />
<br />
<p>Checkboxes</p>
<input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
</body>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.checkbox = [
{
selected: false
},
{
selected: false
},
{
selected: false
}
];
// Check/uncheck all boxes
$scope.selectAll = function () {
$scope.select = true;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = true;
});
};
$scope.clearAll = function () {
$scope.select = false;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = false;
});
};
$scope.checkAll = function () {
angular.forEach($scope.checkbox, function (obj) {
obj.selected = $scope.select;
});
};
});
Refer fiddle
Html
<button ng-click="selectAll()"> all</button>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="selected[item.id]">
</div>
JQuery
$scope.selected = {};
$scope.selectAll= function(){
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
$scope.selected[item.id] = true;
}
};
you can use ng-Checked
Its makes you easier
refer ng-Checked
<md-checkbox ng-click="checked = !checked; check = {}"></md-checkbox>
<div ng-repeat="item in [1,2,3,4,5]">
<md-checkbox ng-checked="checked || check[item]" ng-click="check[item] = !check[item]" ng-model="sel[item]"></md-checkbox>
</div>
I am trying to change the placeholder in the textbox by changing the checkbox using angular. I tried fiddle http://jsfiddle.net/d9uc1dxc/5/.
I have the following code:
**SCRIPT**
function TController($scope) {
$scope.placeholder="%";
$scope.formData = {};
$scope.radioChecked = function ()
{
$scope.placeholder="%";
$scope.apply();
}
$scope.radiounChecked = function ()
{
$scope.placeholder="Count";
$scope.apply();
}
}
What I am trying to achieve is (1) if I change to "%" then the textbox placeholder and (2) if I change to "Count" then the textbox placeholder should change to "Count".
Someone please help me in this issue.
please try to use this code
this is the script file
var app = angular.module("TestApp", []);
function TController($scope) {
$scope.placeholder="%";
$scope.formData = {};
$scope.radioChecked = function ()
{
if($scope.placeholder == "%"){
$scope.placeholder = "Count";
}else{
$scope.placeholder = "%";
}
}
}
and here is the html file
<body ng-app="TestApp" ng-controller="TController">
<div class="flw vreq2">
<label>Voting require2</label>
<div class="oneline">
<div class="onoffswitches">
<input type="checkbox" name="onoffswitch" ng-click="radioChecked()" class="onoffswitch-checkbox" id="myonoffswitch7"/>
<label class="onoffswitch-label" for="myonoffswitch7">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="per1">
<input type="text" placeholder="{{placeholder}}" ng-model="formData.textInput" />
</div>
</body>
hope you find this useful
you dont need the two functions for checked & unchecked
use ng-change in check box as and add a model to checkbox // model name = onoffswitch
<input type="checkbox" ng-model="onoffswitch" ng-change="radioChecked()" ...
when checkbox checked, onoffswitch model value will be true otherwise false
when changing the checkbox radioChecked() function will invoke
$scope.radioChecked = function ()
{
if($scope.onoffswitch) {
$scope.placeholder="%";
} else {
$scope.placeholder="Count";
}
}
see the demo Plunker