I have a bit of code that searches for:
name
category
tag
area
It's okay but I have an issue with searching for a favourite.
Name, category, tag and area are search this function:
return this.meals.filter(meal => {
return meal.strMeal.toLowerCase().includes(this.search.toLowerCase())
&& (category === "All" || meal.strCategory === category)
&& (area === "All" || meal.strArea === area)
&& (tag === "All" || String(meal.strTags).includes(tag))
})
This is how I render my loop:
<li v-for="meal of filteredList">
I have 2 modals, but this modal has to work on click. For example, I click on a product, search only on this product. How can I connect this to filteredList?
The correct syntax is IN not of.
<li v-for="meal in filteredList">
Think of it like this, it's a for loop. It loops through all of the items in the array. So, for each item IN the array.
You could look at it like this:
<li v-for="item in array">
If you need to access the index of these items you can also do this:
<li v-for="(item, index) in array" :key="index">
Related
I have read that we shouldn't put v-if and v-for together in vuejs. I've also got an error in the IDE. How am I suppose to separate the v-if and v-for in my code so that it follows the style guide?
<div
v-for="(value, key, index) in items"
v-if="value.level === undefined || value.level < level"
:key="key"
>
level is a computed value too
computed: {
level() {
return (
user.access>3
);
}
},
You can use invisible wrapper (<template>) element with v-if. Benefit of using this is template won't render until condition met. You can read more about template here
Example:
<div v-for="(value, key, index) in items" :key="key">
<template v-if="value.level === undefined || value.level < level"> // It won't render until v-if = true
....
put the v-if directive in a virtual element template :
<div v-for="(value, key, index) in items" :key="key">
<template v-if="value.level === undefined || value.level < level">
....
If you don't want a bunch of empty divs on the dom, filter it.
computed: {
filtered_items: function() {
return this.items.filter(v => typeof v.level === 'undefined' || v.level < this.level)
}
},
Then use filtered_items instead of items in the v-for
Can also do inline:
v-for="item in items.filter(v => typeof v.level === 'undefined' || v.level < level)"
I want to check the Users check box on selection of category. But when there is no key for Category in usr_cat array previously checked check boxes not unchecked. I want to uncheck all the users when Manager is selected in the category.
Category = [{cid:'1',name:'Head'},cid:'2',name:'Manager'}]
users = [0:{'id':10,name:'AAAAA'},{'id':12,name:'BBBBB'},{'id':13,name:'CCCCC'},{'id':14,name:'DDDDDDDD'}]
usr_cat = ['1':[10,14]]
Category List
<ul class="list-unstyled cat-lst">
<li ng-repeat = "cat in categery" ng-click ="selectcategry(cat.cid)>{{cat.name}} </li>
<ul>
User List
<ul class="list-unstyled usr-lst">
<li ng-repeat = "usr in users">
<span class=" checkbox ">
<input class="optionChechk " id="user_{{usr.id}}" type="checkbox" ng-checked = "{{usr_cat[sele_cid] != 'null' && usr_cat[sele_cid] != 'undefined' && usr_cat[sele_cid] != '' && (usr_cat[sele_cid].indexOf(usr.id) != -1)}}" ng-value="{{usr.id}}" >
<label for="user_{{usr.id}}" txt = "{{usr_cat[sele_cid]}}">{{usr.name}}</label>
</span>
<li>
</ul>
JS
$scope.selectcategry = function(cid){
$sele_cid = cid;
}
Hi the code contains many error
Angular braces are used inside ng-attributes.
improper closer of quotes"".
Improper naming standards camel-casing is the format.
Category is the variable you mentioned spelling categery is used
everywhere.
<ul class="">
<li ng-repeat = "cat in categery"
ng-click ="selectcategry(cat.cid)">{{cat.name}}</li>
</ul>
Array responses are seem to inValid,suggested bellow,scope is missing in sele_cid
$scope.categery =[{"cid":'1',"name":'Head'},{"cid":'2',"name":'Manager'}];
$scope.users = [{'id':10,"name":'AAAAA'},{'id':12,"name":'BBBBB'}, {'id':13,"name":'CCCCC'},{'id':14,"name":'DDDDDDDD'}];
$scope.usr_cat = [10,14];
$scope.selectcategry = function(cid){
$scope.sele_cid = cid;
}
please work on this
I have a list of users and I have ordered them by title. When the list if created I want to check if the previous user has a different title than the current user and if so do some logic.
<div>
<div v-for="user in the_category`.`users" :key="user.id">
<h1 v-bind:title="user.title" >{{ user.title }}</h1>
// If the title is not the same as the previous user.title I would like the following <h3> below to show
// However if the title is the same as the previous user.title I do not want it to show.
// How do I pass the value/text of the <h1> to my title data variable
// and compare the value with the last value on each loop?
<h3 v-show="user.title != title">This is a new title</h3>
</div>
</div>
</template>
<script>
export default {
props: [
"the_category",
"title"
],
data: function() {
return {
category: this.the_category,
title: "",
};
},
}
</script>
```
You can get the index of your loop in your v-for and then use it to check the full array.
First, replace this:
v-for="user in the_category`.`users"
With this:
v-for="(user, index) in the_category`.`users"
That will get both the current element (user) and its index in the array (index).
Then, replace this:
<h3 v-show="user.title != title">This is a new title</h3>
With this:
<h3 v-show="index === 0 || user.title != the_category`.`users[index - 1].title">This is a new title</h3>
Your <h3> will then be visible if your element is the first (index === 0) or if the current title differs from the previous.
I have a bag with several divs where each div has a list of items that all have the same value for location, so the "Misc" div has items that all have "location: misc", the "Armor" div has items that all have "location: armor", etc.
I can sort the items into their respective divs but I want to be able to drag an item to another div and then change the item's location value accordingly, but I have no idea how to go about this.
I tried this solution but I must not be understanding it correctly.
Code Snippet - this just consoles 'undefined'
HTML:
<div
[dragula]='"bag-equipment"'
[dragulaModel]="equipmentBagOfHolding"
[attr.data-id]="bag-equipment"
>
<mat-card
*ngFor="let item of equipmentBagOfHolding"
>
{{ item.name }}
</mat-card>
</div>
<div
[dragula]='"bag-equipment"'
[dragulaModel]="equipmentArmor"
[attr.data-id]="bag-equipment"
>
<mat-card
*ngFor="let item of equipmentArmor"
>
{{ item.name }}
</mat-card>
</div>
TS:
dragulaService.drop.subscribe(value => {
const [bagName, e, el] = value;
console.log('id is:', e.dataset.id);
});
I realized that I can get the origin and destination with:
this.dragula.drop.subscribe(value => {
//Bag
console.log(value[0]);
// What is moved
console.log(value[1]);
// Destination
console.log(value[2]);
// Origin
console.log(value[3]);
});
And find the id, of the destination for example, with:
console.log(value[2]['id']);
Hi Im attempting to build functionality around the length of a filter in angularjs, and although its working as it should in the view, in the controller the variable seems to stay outdated...
When I click on the div below it filters a list and calls the filterby function. The output of the length of the newly filtered list updates in the view correctly. However in the function itself I have a log set and it is still showing the old length when I click on the div.
<div ng-repeat="filter in filters" ng-click="filterby(filter.filter_type)">{{filter.filter_type}}</div>
<ul>
<li ng-repeat="event in filtered = (events | filter:query) | orderBy:'-event_date' ">
<span >{{event.event_date}},{{event.event_name}}, {{event.event_venue}}, {{event.event_description}} </span>
</li>
</ul>
<br />Length of filtered items {{filtered.length}}
And my view....
$scope.filterby = function(filterby) {
if (filterby == 'ALL') {
$scope.query = '';
}
else {
$scope.query = filterby;
}
console.log($scope.filtered.length);
};
My filter data:
$scope.filters = [
{'filter_type' : 'ALL'},
{'filter_type' : 'Macnass'}
];
EDIT: Ok its not that it nots working at all, its just showing the previous value, as if its one click behind all the time, so its something to do with the fact that the variable in the view is updated after the list is made. but Im not sure how to go about insuring the variable in the controller is the latest value.
Plunker: http://plnkr.co/edit/u7KpqYx8gDwaaXEvGeMn?p=preview
check out the plunker
added below
$scope.filtered = $filter('filter')($scope.events, $scope.query)
in $scope.filterby function