Need Help.Here is the solution I have been looking for..
I am trying to show 6 elements from an array excluding the hidden elements. ie: If there are two hidden elements technically it will have to show 8 elements. I dont want to increment the scope object bound to limitTo as it is doing lot of complication. Is there any way that I can use a filter to keep the limitTo to a constant and bypassing limitTo filter if the element is hidden. I have been looking for the solution for a couple of days. Nothing worked out yet. I would really appreciate if someone can help on this.
<div data-ng-repeat="user in vm.userList | limitTo: '6" ng-hide="user.checked">
<input type="checkbox" ng-model="user.checked"> {{user.name}}</input>
</div>
You need to change a bit approach. Instead of ng-hide use filter please see sample below
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
var vm = this;
vm.userList = [
{
name: 1,
checked: true
}, {
name: 2,
checked: false
}, {
name: 3,
checked: true
}, {
name: 4,
checked: false
}, {
name: 5,
checked: false
}, {
name: 6,
checked: false
}, {
name: 7,
checked: false
}, {
name: 8,
checked: false
}, {
name: 9,
checked: false
}, {
name: 10,
checked: false
}, {
name: 11,
checked: false
},
];
return vm;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl as vm">
<div data-ng-repeat="user in vm.userList | filter: {checked:false}| limitTo: 6">
{{$index+1}})
<input type="checkbox" ng-model="user.checked">{{user.name}}</input>
</div>
</div>
</div>
Related
I followed this svelte tutorial and I wonder if I could do this group binding to a JSON array instead of simple array, for example I would like to do a planets selector:
<script>
let planets = [{
name: 'Jupiter',
enable: false
},
{
name: 'Saturn',
enable: false
},
{
name: 'Uran',
enable: false
},
{
name: 'Neptun',
enable: false
},
{
name: 'Pluto',
enable: true
},
];
$: planets, console.log(planets)
</script>
{#each planets as planet}
<label>
<input type=checkbox bind:group={planets} name={planet.name} value={planet}>
{planet.name}
</label>
{/each}
This is a REPL. I wonder if there is a way how to properly bind JSON array (enable array field with inputs value) in svelte each loop. Now it pops out with each item as you click as you can see in REPL's console.log and I would like just to uncheck it.
With bind:checked property displays proper way
<input type=checkbox bind:checked={planet.enable} value={planet}>
But this does not change array.enable value on click. Can I achieve responsibility of planets array here?
I think the problem is that you set the value to planet. When you remove this and only use the checked property, then the array updates with the proper value.
<script>
let planets = [{
name: 'Jupiter',
enable: false,
},
{
name: 'Saturn',
enable: false
},
{
name: 'Uran',
enable: false
},
{
name: 'Neptun',
enable: false
},
{
name: 'Pluto',
enable: true
},
];
$: planets, console.log(planets)
</script>
{#each planets as planet}
<label>
<input type=checkbox bind:checked={planet.enable}>
{planet.name}
</label>
{/each}
You can checkout my REPL.
Here is a screenshot from the update:
here is the jsfiddle.
HTML:
<div ng-app="app">
<div ng-controller="ctrl">
<div ng-repeat="item in list">
<div mycb group="{{item.group}}" title="{{item.title}}" is-checked="item.isChecked" value="{{item.value}}" update="callMe()"></div>
</div>
<p>{{result}}</p>
</div>
</div>
JS:
angular.module("app",[])
.controller("ctrl", ["$scope", function($scope){
$scope.list = [
{ group: "pet", title: "dog", isChecked: true, value: "dog" },
{ group: "pet", title: "cat", isChecked: true, value: "cat" },
{ group: "pet", title: "bird", isChecked: true, value: "bird" },
{ group: "pet", title: "snake", isChecked: true, value: "snake" },
{ group: "pet", title: "boy", isChecked: true, value: "boy" },
{ group: "pet", title: "cup", isChecked: true, value: "cup" }
];
$scope.callMe = function(){
var collection = [];
for(var i=0;i<$scope.list.length;i++){
var isChecked = $scope.list[i].isChecked;
if(isChecked){
collection.push($scope.list[i].value);
}
}
$scope.result = collection.join(" ");
}
}])
.directive("mycb", function(){
return{
restrict: "A",
scope: {
title: "#",
isChecked: "=",
group: "#",
value: "#",
update: "&"
},
template: "<input type='checkbox' ng-model='isChecked' name='{{group}}' value='value' ng-change='update()'>{{title}}"
};
})
I created a group of checkbox and it will be updated when each of them is clicked.
By default, all checkboxes are checked. When I click the first one, it will be turned to status unchecked. The value of other checked boxes will show up.
For example:
dog,cat,bird,snake,boy,cup
When I click dog, the checkbox of dog will be turned to unchecked and "cat,bird,snake,boy,cup" will show up. Actually, it not happened like that. It shows "dog,cat,bird,snake,boy,cup".
Please check it out and give me a hand. Many thanks!
You can use an arrray to keep track of the boxes that are checked.
$scope.selectedCheckboxes = [];
$scope.callMe=function(item){
var idx = $scope.selectedCheckboxes.indexOf(item);
// is currently selected
if (idx > -1) {
$scope.selectedCheckboxes.splice(idx, 1);
}
// is newly selected
else {
$scope.selectedCheckboxes.push(item);
}
};
And in html pass item.value to callMe function. You wil have all the value that are checked in $scope.selectedCheckboxes
<div ng-repeat="item in list">
<div mycb group="{{item.group}}" title="{{item.title}}" is-checked="item.isChecked" value="{{item.value}}" update="callMe(item.value)"></div>
</div>
HTML
<div ng-repeat="item in list">
<div mycb group="{{item.group}}" title="{{item.title}}" is-checked="item.isChecked" value="{{item.value}}" ng-change="callMe()"></div>
</div>
Use ng-change event. Call Me function called when the user clicked on the checkbox. you can easily track all the checked checkbox in the controller.
Let me know if you need help more. Thanks.
Usually, an item is removed from the list of selectable items, after being selected.
But, when I refresh the underlying list of items, the (already) selected items, are selectable too!
How can i avoid this?
My view looks like this:
<div ng-controller="MyCtrl" ng-init=buildList()>
<button ng-click="buildList()">Refresh list</button>
<select multiple ui-select2 data-ng-model="selectedDaltons">
<option data-ng-repeat="dalton in daltons" value="{{dalton.id}}">
{{dalton.name}}
</option>
</select>
</div>
My controller:
function MyCtrl($scope) {
// Averell is preselected (id:4)
$scope.selectedDaltons = [4];
// $scope.daltons is iterated in ng-repeat
// its initially called in ng-init
$scope.buildList = function() {
$scope.daltons = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'William' },
{ id: 3, name: 'Jack' },
{ id: 4, name: 'Averell' },
{ id: 5, name: 'Ma' }
];
};
};
Here it is as a jsfiddle.
Actually I think I found an solution (to my own question):
Based on the controller of the original question, change the array, before replacing it:
function MyCtrl($scope) {
// Averell is preselected (id:4)
$scope.selectedDaltons = [4];
// $scope.daltons is iterated in ng-repeat
// its initially called in ng-init
$scope.buildList = function() {
// touch array before renewal!!
if (angular.isArray($scope.daltons)) {
$scope.daltons.pop();
}
$scope.daltons = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'William' },
{ id: 3, name: 'Jack' },
{ id: 4, name: 'Averell' },
{ id: 5, name: 'Ma' }
];
};
};
Here the updated jsfiddle.
I'm trying to filter results by star rating, these filters are checkboxes. I can't get this to work. I keep getting the error:
Error: input is undefined
This is my code so far:
$scope.ratings = [
{ name:'One Star', value:1, selected: true},
{ name:'Two Stars', value:2, selected: true},
{ name:'Three Stars', value:3, selected: true},
{ name:'Four Stars', value:4, selected: true},
{ name:'Five Stars', value:5, selected: true}
]
.filter('ratingsFilter', function(){
return function(vehicleResults, ratings){
console.log(ratings)
}
})
<label ng-repeat="rating in ratings">
<input name="rating" type="checkbox" value="{{rating.value}}" ng-model="rating"> star rating {{rating.value}}
</label>
When displaying the filtered results:
<div ng-repeat="vehicle in (filteredResults = (vehicleResults | filter: priceFilter | ratingsFilter:rating )) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="results-container">
Can anyone give me some pointers on how to filter these results?
Thank you in advance.
I've created plunk but it's playing tricks on me so here you have codepen
http://codepen.io/maurycyg/pen/RNrxQj
JS
var app = angular.module('ratings', []);
app.controller('MainCtrl', function($scope) {
$scope.ratings = [{
name: 'One Star',
value: 1,
selected: true
}, {
name: 'Two Stars',
value: 2,
selected: true
}, {
name: 'Three Stars',
value: 3,
selected: true
}, {
name: 'Four Stars',
value: 4,
selected: true
}, {
name: 'Five Stars',
value: 5,
selected: true
}]
$scope.vehicles = [{
name: 'One',
rating: 1
}, {
name: 'Two',
rating: 2
}, {
name: 'Three',
rating: 3
}, {
name: 'Four',
rating: 4
}, {
name: 'Five',
rating: 5
}, ]
}).filter('ratingsFilter', function() {
return function(vehicles, ratings) {
filteredResults = []
angular.forEach(vehicles, function(vehicle) {
angular.forEach(ratings, function(rating) {
if (vehicle.rating === rating.value && rating.selected === true) {
filteredResults.push(vehicle)
}
})
})
return filteredResults;
}
})
I think your problem lies at the ratings repeater and not on your filter.
When you are using ng-model directive it takes care of the value binding, you cannot have both interpolated value attribute and ng-model on an input element.
I believe what you whant to achieve is best done if you remove the ng-model completely and instead use the ng-checked directive like so:
var app = angular.module('main', []);
app
.filter('ratingsFilter', function() {
return function(items, includedRatings) {
return items.filter(function (value, index, array) {
return includedRatings.indexOf(value.rating) > -1;
});
};
})
.controller('MainCtrl', function($scope) {
$scope.selectedRatings = [1, 2, 3, 4, 5];
$scope.toggleRating = function (val) {
var array = $scope.selectedRatings;
var isChecked = array.indexOf(val);
if (isChecked > -1) {
for (var i = array.length; i--;) {
if (array[i] === val) {
array.splice(i, 1);
}
}
}
else {
array.push(val);
}
};
$scope.ratings = [
{ name:'One Star', value:1, selected: true},
{ name:'Two Stars', value:2, selected: true},
{ name:'Three Stars', value:3, selected: true},
{ name:'Four Stars', value:4, selected: true},
{ name:'Five Stars', value:5, selected: true}
];
$scope.priceFilter = {};
$scope.vehicleResults = [
{ name:'Porche', rating: 3, price:80000},
{ name:'Ferrari', rating: 1, price:150000},
{ name:'Volvo', rating: 2, price:54000},
{ name:'Batmobile', rating: 5, price:10},
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<label ng-repeat="rating in ratings">
<input name="rating" type="checkbox"
value="{{rating.value}}"
ng-click="$parent.toggleRating(rating.value)"
ng-checked="$parent.selectedRatings.indexOf(rating.value) > -1" />
star rating {{rating.value}}
</label>
<br />
<label>
Price:
<input ng-model="priceFilter['price']" />
</label>
<label>
selected Rating:
{{ selectedRatings }}
</label>
<ul >
<li ng-repeat="vehicle in vehicleResults | filter : priceFilter | ratingsFilter: selectedRatings">
{{vehicle.name}} - {{vehicle.price | currency}} ({{vehicle.rating}} stars)
</li>
</ul>
</div>
I am trying to show a select box inside a ng-repeat and am stuck with the following:
<tr ng-repeat="element in elements" post-repeat-directive>
<td>{{element.name}}</td>
<td>
<select ng-model="element.type"
ng-options="item.id as item.name for item in tipo_items"></select>
</select>
</td>
</tr>
In my controller I have:
$scope.tipo_items = [
{ id: 1, name: 'uno' },
{ id: 2, name: 'dos' },
{ id: 3, name: 'tres' },
{ id: 4, name: 'cuatro' },
{ id: 5, name: 'cinco' },
];
This shows the select items, but no item is pre-selected!
I checked the element.type values and they are correct...
What am I doing wrong?
According to the comprehension expression you defined in the select, you need to use the id value to preselect the item and set it for the model object.
$scope.element = {};
$scope.element.type = $scope.tipo_items[0].id;
DEMO
OK I found the problem...
I was loading the id from the database as json, and the id was a string, not an integer...
this solved the problem:
$scope.tipo_items = [
{ id: '1', name: 'uno' },
...
instead of
$scope.tipo_items = [
{ id: 1, name: 'uno' },
...
This is default behavior by angular select directive. If you'll set ng-model to a default in the ctrl you'll get it preselected.
something like (in the ctrl):
$scope.element.name = $scope.tipo_items[0]