I'm loading data from a database and save it to an array as follows:
$scope.allGroups = [{id: 1, groupName: group1}, {id: 2, groupName: group2}, ..]
In my view, I'm trying to select multiple group names as follows:
<div
class="drag-container avaliable-groups-connect groups-container schedule-container"
>
<div class="group" ng-repeat="m in allGroups">
<input type="checkbox" ng-model="m.selected" />
<span>{{ m.groupName }}</span>
</div>
</div>
I want to save selected items (m.selected) to an array one-by-one and bind that array to ng-model="schedule.selectedGroups"
How can I perform that? Thank you..
<div class="group" ng-repeat="m in allGroups" ng-init="m.selected = false">
<input type="checkbox" ng-model="m.selected" />
<span>{{ m.groupName }}</span>
</div>
Now your checkbox ng-model with modify the variable to true or false and in your js code
you can do like below.
$scope.schedule.selectedGroups = $scope.allGroups.filter(function (data) {
return data.selected === true;
});
Related
I am stuck in a situation where i have to find the data using filter in ng-repeat
Situation :
Data is an array of objects with name and status and status has property a
now want to filter objects having property status.a as started and in progress
I have tried multiple solution
Sol1:
ng-repeat="item in items | filter: {status :{a:'Not Started'},status: {a:'In Progress'}}
returns result : status.a of In Progress only
Sol2:
<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">
{{ item.name }}
</p>
returns same result : status.a of In Progress only
html
<div ng-controller="mainCtrl">
<h1>List 1</h1>
<ul>
<li class="clearfix">
<label>
<input ng-model="tracks.ns"
ng-true-value="'Not Started'"
ng-false-value="''"
type="checkbox">
Not started
</label>
</li>
<li class="clearfix">
<label> <input ng-model="tracks.ip" ng-true-value="'In Progress'" ng-false-value="''" type="checkbox">In-progress </label>
</li>
<li class="clearfix">
<label> <input ng-model="tracks.do" ng-true-value="'Done'" ng-false-value="''" type="checkbox">Done </label>
</li>
</ul>
{{tracks.ns}}
<p ng-repeat="item in filteredItems">{{ item.name }}</p>
<h1>List 2</h1>
<p ng-repeat="item in items | filter: {status :{a:'Not Started' , a:'In Progress'}}">{{ item.name }}</p>
</div>
js
$scope.items = [{
name: "Alvi",
status: {
a: 'Not Started'
}
}, {
name: "Krane",
status: {
a: 'Done'
}
}, {
name: "Tate",
status: {
a: 'In Progress'
}
}, {
name: "Lorus",
status: {
a: 'In Progress'
}
}];
$scope.tracks = {ns: '',ip: '',done : ''}
Questions:
Can I achieve the desire result without custom filter ?
If yes than how without custom filter?
plunker: http://plnkr.co/edit/njsoPu1LHLmNmEx6lCew?p=preview
Use a function in the filter expression:
<p ng-repeat="item in items | filter : customFn">
{{ item.name }} {{ item.status }}
</p>
JS
$scope.customFn = function(value, index, array) {
console.log(value, index, array);
if (!value) return true;
if (value.status.a == 'Not Started') return true;
if (value.status.a == 'In Progress') return true;
//else
return false;
}
For more information, see AngularJS Filter Component Reference - filter
The DEMO on PLNKR
I define a collection of language objects like this:
$scope.languages = [
{'name':'English', value:'english', 'checked':true, 'available': true},
{'name':'German', value:'german', 'checked':false, 'available': true},
{'name':'Spanish', value:'spanish', 'checked':true, 'available': true}
];
Then I display them in checkboxes like this:
<div class="form-group">
<label for="description">Languages</label>
<div class="checkbox" data-ng-repeat="language in languages">
<label><input type="checkbox" ng-model="language.checked">{{language.name}}</label>
</div>
</div>
And as they are checked on and off, I display a list of them like this:
<div class="dataRow">
<div class="dataLabel">Languages:</div>
<div class="dataValue text-success" data-ng-repeat="language in languages">
<span ng-if="language.checked">{{language.name + ($last ? '' : ',')}}</span>
</div>
<div class="clear"></div>
</div>
And as long as the last language is selected, then the final comma will not be shown. But if the last language (Spanish) is not selected, then the final comma is erroneously shown.
Instead of $last I need something like $last(isChecked). How do I do that?
You could iterate only over the checked items by adding a filter in your ng-repeat like this:
<div class="dataRow">
<div class="dataLabel">Languages:</div>
<div class="dataValue text-success" data-ng-repeat="language in languages | filter: {checked: true}">
{{language.name + ($last ? '' : ',')}}
</div>
<div class="clear"></div>
</div>
That way you know the last element is checked.
Here's a working fiddle http://jsfiddle.net/q7ch1ysh/
Just specify that in the ternary:
language.name + ($last && language.checked ? '' : ',')
try this:
<div class="dataValue text-success" data-ng-repeat="language in languages track by $index">
<span ng-if="language.checked">{{language.name + (($index==languages.length && language.checked) ? '' : ',')}}</span>
</div>
First of all I am new to angularjs.
I want to make a simple / quick refference betweeen my anchors and paragraphs>inputs, depending on what I clicked in my angular web app.
I generate 3 table rows with 1 table data with the ng-repeat. After this, when I click one of the anchors my toggleDetails(todo.id,todo.nume,todo.prenume) triggers and I update my next below input values (#inputId, #inputNume, #inputPrenume) with basic javascript. I feel like I m doing it hard way. Can I use less code like some angularjs directives ?(I`m using a Yeoman framework) So, this is my HTML:
<div class="container" controller="AboutCtrl">
<h2>Lista persoane</h2>
<table>
<tr>
<th>Nume si prenume</th>
</tr>
<tr class="form-group " ng-repeat="todo in todos">
<td>
<a href ng-click="toggleDetails(todo.id,todo.nume,todo.prenume)">
<input type="text" ng-model="todo.nume" class="form-control">
</a>
</td>
</tr>
</table>
<div ng-hide="hideDetails">
<p>Id:<input type="text" id="inputId"/></p><br>
<p>Nume:<input type="text" id="inputNume"/></p><br>
<p>Prenume:<input type="text" id="inputPrenume"/></p><br>
</div>
</div>
About.js file
.controller('AboutCtrl', function ($scope, AfisareDateService) {
$scope.todos = [{
id: 1,
nume: 'name1',
prenume: 'name2'},{
id: 2,
nume: 'name3',
prenume: 'nam4'}, {
id: 3,
nume: 'name5',
prenume: 'name6'
}];
$scope.hideDetails = true;
$scope.toggleDetails = function(id,nume,prenume) {
$scope.hideDetails = !$scope.hideDetails;
var x = document.getElementById('inputId');
var y = document.getElementById('inputNume');
var z = document.getElementById('inputPrenume');
x.value = id;
y.value = nume;
z.value = prenume;
});
few changes
$scope.toggleDetails = function(todo) {
$scope.hideDetails = !$scope.hideDetails;
$scope.selectedTodo = todo
});
and use ng-model
<p>Id:<input type="text" ng-model="selectedTodo.id"/></p><br>
In html change parameter of toggledetail
<tr class="form-group " ng-repeat="todo in todos">
<td>
<a href ng-click="toggleDetails(todo)">
<input type="text" ng-model="todo.nume" class="form-control">
</a>
<div ng-show="Object.keys(selectedTodo).length>0">
<p>Id:<input ng-model="selectedTodo.id type="text" id="inputId"/></p><br>
<p>Nume:<input ng-model="selectedTodo.name" type="text" id="inputNume"/></p><br>
<p>Prenume:<input ng-model="selectedTodo. prenume" type="text" id="inputPrenume"/></p><br>
</div>
</div>
In controller
$scope.selectedTodo ={} //take variable
$scope.toggleDetails = function(todo) {
$scope.selectedTodo = todo;
I need help to use ng-model directive with ui-gmap-marker. My example app.js is:
// DevicesController
$scope.devices = {
id: 1,
center: { latitude: X, longitude Y },
options: {
show: true,
name: 'device 1',
radius: 100
}
(...)
}
My index.html is:
<ul ng-controller="DevicesController">
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas" ng-controller="DevicesController">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
(...)
How can I use ng-model? Doesn't work because I'm using the same controller e two different places? I want that the user be able to click in input checkbox and the marker appear/disappear.
I'd suggest simply wrap both the div in same controller rather than providing a separate controller to them.
Markup
<div ng-controller="DevicesController">
<ul>
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
</div>
(...)
</div>
Else maintain the data in share able service that will provide the data to both controller and will make sure, data should be updated in both places.
I've been playing with Angular.js recently and decided to check all the checkboxes once parent checkbox is checked, which I've done using ng-model and ng-checked directives.
<div ng-app>
<div ng-controller="Ctrl">
<input type="checkbox" ng-model="parent"/> Select All<br/>
<input type="checkbox" ng-model="child_1" ng-checked="parent" ng-click="getAllSelected()"/> First<br/>
<input type="checkbox" ng-model="child_2" ng-checked="parent" ng-click="getAllSelected()"/> Second<br/>
<input type="checkbox" ng-model="child_3" ng-checked="parent" ng-click="getAllSelected()"/> Three<br/>
<input type="checkbox" ng-model="child_4" ng-checked="parent" ng-click="getAllSelected()"/> Four<br/>
<input type="checkbox" ng-model="child_5" ng-checked="parent" ng-click="getAllSelected()"/> Five<br/>
</div>
</div>
Now I'm trying select all the parent checkbox once all the child checkboxes are checked but facing some issues.
function Ctrl($scope) {
$scope.getAllSelected = function () {
var chkChild = document.querySelectorAll('input[ng-model^="child_"]').length;
var chkChildChecked = document.querySelectorAll('input[ng-model^="child_"]:checked').length;
if (chkChild === chkChildChecked) $scope.parent= true;
else $scope.parent= false;
}
}
Demo: http://jsfiddle.net/codef0rmer/QekpX/
Can we make the above code more robust?
The ng-checked attribute in the checkbox takes in an expression. So you can give an expression with and/or conditions, as mentioned below to make it checked based on an expression.
<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>
You dont have to write a seprate function to do the computation when every child checkbox is clicked.
Here is example in jsfiddle
Visually it updates all the checkboxes checked with ng-selected, but then when you go to actually submit the data the data doesn't match up with what was selected. I suggest doing a ng-click() which sucks, but if your data is dynamic.
http://codepen.io/stirlingw/pen/gpwXWM
//Random JSON object
$scope.labels =
[{
label: 'Death Row Records',
selected: false,
artists: [
{artist: 'MC Hammer', selected: false},
{artist: 'Andre "Dr. Dre" Young', selected: false},
{artist: 'Snoop Dogg', selected: false},
{artist: 'Tupac Shakur', selected: false},
{artist: 'Nate Dogg', selected: false},
]
}];
//JS
$scope.clicker = function(label){
label.artists.forEach(function(e){
e.selected = !label.selected;
});
};
//html
<ul>
<li ng-repeat="label in labels"> <input type="checkbox" ng-model="label.selected" ng-click="clicker(label)"> {{label.label}}
<ul>
<li ng-repeat="artist in label.artists">
<input type="checkbox" ng-model="artist.selected" > {{artist.artist}}
</li>
</ul>
</li>
</ul>