My REST API is returning grouped data,
{
"Homer Simpson": [
{
"name": "First article",
"type": "text"
},
{
"name": "Second article",
"type": "text"
}
],
"Marge Simpson": [
{
"name": "Third article"
"type": "text
}
]
}
Articles can be filtered:
<input type="text" placeholder="Quicksearch" ng-model="quicksearch">
...
<div class="article-group" ng-repeat="(author, articles) in articles">
<h3>{{author}} ({{filtered.length}})</h3>
<div class="article" ng-repeat="article in articles | filter: { name: quicksearch } as filtered">
The important thing here is the ({{filtered.length}}). After applying a filter by typing something into the quicksearch input the length changes. Everything works fine, but I'd like hide "empty" authors; if you type in "third" you should no longer see Homer Simpson.
Tried ng-if="filtered.length > 0" on the article-group div, but that doesn't work.
You can simply put ng-show="filtered.length" on .article-group container:
<div class="article-group" ng-show="filtered.length" ng-repeat="(author, articles) in articles">
<h3>{{author}} ({{filtered.length}})</h3>
<div class="article" ng-repeat="article in articles | filter: { name: quicksearch } as filtered">
<pre>{{ article | json }}</pre>
</div>
</div>
Related
I'm learning vue.js and have an object that I want to loop through. I want to make a single component and when the data changes, it updates dynamically instead of having to bind the keys(motorLine1) etc.
How can I display the parent object keys (motor,wheels,doors,seats) and also display the values for each key without having to bind motorLine1 etc?
Data
data(){
return {
"cars": {
"motor":[
{"motorLine1": "print this line"},
{"motorLine2": "print this line"}
],
"wheels": "print this line",
"doors":[
{"doorsLine1": "print this line"},
{"doorsLine2": "print this line"}
],
"seats": "print this line"
}
}
},
Loop
<div v-for="(car, index) in cars" :key="index">
{{index}}
<div v-for="(test, index) in config" :key="index">
{{'print the sub key value'}}
</div>
</div>
Add the key property inside the v-for loop then check if the current item is an object (array) so loop through it else render it directly
new Vue({
el: '#app',
data() {
return {
"cars": {
"motor": [{
"motorLine1": "print this line motor"
},
{
"motorLine2": "print this line motor"
}
],
"wheels": "print this line wheels",
"doors": [{
"doorsLine1": "print this line doors"
},
{
"doorsLine2": "print this line doors"
}
],
"seats": "print this line seats"
}
}
},
})
.comp {
color: #0215aa;
font-weight: bold
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">
<div v-for="(car,key, index) in cars" :key="index">
<div class="comp">{{key}}</div>
<template v-if="typeof(car)==='object'">
<div v-for="(test,subKey, i) in car" :key="i">
<div v-for="item in test">
---{{item}}
</div>
</div>
</template>
<div v-else>---{{car}}</div>
</div>
</div>
Here you go :
new Vue({
el: '#app',
data: {
"cars": {
"motor":[
{"motorLine1": "print this line"},
{"motorLine2": "print this line"}
],
"wheels": "print this line",
"doors":[
{"doorsLine1": "print this line"},
{"doorsLine2": "print this line"}
],
"seats": "print this line"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(carsKey, index) in Object.keys(cars)" :key="index">
{{ carsKey }}
<div v-for="(test, i) in cars[carsKey]" :key="i" v-if="typeof(test) === 'object'">
<div v-for="(testKey, j) in Object.keys(test)" :key="j">
{{ test[testKey] }}
</div>
</div>
<div v-if="typeof(cars[carsKey]) === 'string'">
{{ cars[carsKey] }}
</div>
</div>
</div>
this is a question about vue and its v-table, specifically its v-client-table
This example has a filter on name pets and birthdays but not on age, edit or delete. https://jsfiddle.net/f5h8xwgn/299/
I need something similar but I'm unable to reproduce the affect in my project. I have 3 columns: name, active, and edit - edit is just a bunch of buttons - I don't need to sort or filter buttons.
this is my code code for the table:
<v-client-table :data="filteredList"
:columns="['name', 'active', 'edit']" :options="options"
>
<template slot="name" scope="props">
<div v-if="props.row.editing">
<textbox v-model="editName"></textbox>
</div>
<div v-else>{{ props.row.name }}</div>
</template>
<template slot="active" scope="props">
<div v-if="props.row.editing">
<select class="form-control" v-model="editActive">
<option v-bind:value="1">Active</option>
<option v-bind:value="0">Inactive</option>
</select>
</div>
<div v-else>
<div v-if="props.row.active">Active</div>
<div v-else>Inactive</div>
</div>
</template>
<template slot="edit" scope="props">
<div class="text-right">
<button type = "button"
#click="editFabricator(props.row)"
class="btn btn-primary">
<div v-if="props.row.editing">Cancel</div>
<div v-else>Edit</div>
</button>
<button v-if="props.row.editing"
type = "button"
#click="saveEdit(props.row.id)" class="btn btn-primary">
Save
</button>
</div>
</template>
</v-client-table>
this is my options
options: {
filterByColumn: true,
headers: {
name: 'Name',
active: 'Active',
edit: 'Edit',
},
listColumns: {
active: [{
id: '0',
text: 'Inactive'
}, {
id: '1',
text: 'Active'
}]
},
}
in the example on jsfiddle edit isn't listed in the :columns list when the table is declared but it still shows up in the table. if I remove edit from the :columns list it removes the edit column from the table and no matter what I do I can't get it to show up. if I put edit in the :columns list then the column is there but it has a filter. which I don't want.
this is for a laravel project. not sure if that makes a difference.
Under Options add the columns you want to filter by using the
filterable option.
{
"options": {
"filterByColumn": true,
"filterable": [
"name",
"active"
],
"headers": {
"name": "Name",
"active": "Active",
"edit": "Edit"
},
"listColumns": {
"active": [
{
"id": "0",
"text": "Inactive"
},
{
"id": "1",
"text": "Active"
}
]
}
}
}
https://matanya.gitbook.io/vue-tables-2/options-api
I am new to angularjs. I am trying to add check boxes into a particular scope.group
Below is the mock-up of what i want to achieve and code.
<accordion close-others="false">
<accordion-group ng-repeat="group in groups" is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
<span class="title-pos" >{{group.title}}</span>
</accordion-heading>
{{group.content}}
</accordion-group>
</accordion>
<script>
angular.module('main',['ui.bootstrap'])
.controller('AppCtrl', function($scope){
$scope.groups = [
{
"title":"Series",
"open":true
},
{
"title":"Price Range",
"content":"Content B",
"open":true
},
{
"title":"Engine Type",
"content":"Content C",
"open":false
},
{
"title":"Engine Type",
"content":"Content C",
"open":false
},
{
"title":"Life Style",
"content":"Content C",
"open":false
},
{
"title":"Seats",
"content":"Content C",
"open":false
},
];
})
</script>
I would like to add the check box to Engine type group.
Look forward for any help
Thanks in advance
Replace {{group.content}} with <div ng-bind-html="group.content"></div>
You should then add your checkboxes HTML code inside "content" part of "Engine Type" group, similar to this :
...
{
"title":"Engine Type",
"content":'<input type="checkbox" name="checkbox1" value="Petrol">Petrol',
"open":false
},
...
For each one of the enteries in $scope.groups whatever comes in "content" will appear inside <div ng-bind-html="group.content"></div> block.
Finally, Be sure to add ngSanitize to your module dependencies as in this plunkr
You can add the checkboxes in the content area
<accordion-group ng-repeat="group in groups" is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
<span class="title-pos" >{{group.title}}</span>
</accordion-heading>
<div ng-repeat="option in group.options">
<!-- checkbox and text here -->
</div>
</accordion-group>
And reorganize your data to include the checkboxes model
$scope.groups = [
{
"title":"Engine Type",
"content":"Content C",
"open":false,
"options": [
"Petrol", // or if you have id for them: {id:engine_petrol, name:"Petrol"}
"Diesel",
"Hybrid"
]
}
];
I for my stage have to modifie a web site for that i need angularjs i wanted to use the command ng-repeat to display some documentation but when i add ng-repeat in the div it "destroy" it and i cant figure out why...
So there is the code hope u can help me.
There is my js
App.controller('doccontroller', [ function(){
return {
scope: {},
restrict: 'A',
link: function ($scope){
$scope.docs = [
{
"id_section" : 0,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
},
{
"id_section" : 1,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
},
{
"id_section" : 2,
"description": "RANDOM STUFF",
"source": [
{
"python": "TEXTE",
"ruby": "TEXTE",
"javascript": "TEXTE"
}
]
}
]
}
}
}
])
`There is my route to "include" the controller
$routeProvider.when '/docs',
templateUrl : config.BaseHtml+'/Page/docs.html'
controller : 'doccontroller'
`
and to finish the html :)
<div id="api-docs">
<div id="methods">
<div class="languages">
<a class="language selected" data-lang="ruby" href="#">Ruby</a>
<a class="language" data-lang="python" href="#">Python</a>
<a class="language" data-lang="php" href="#">PHP</a>
</div>
<div>
<div class="method" id="intro">
<div class="method-section clearfix">
<div class="method-description" ng-repeat="doc in docs">
<h3>Introduction</h3>
<p>
{{doc.description}}
</p>
</div>
<div class="method-example">
<pre>
<code class="ruby"># All this code is just folololol
React.api_key = "In here goes your api key!"</code><code class="python"># All this code is just for demonstration purposes
react.api_key = "In here goes your api key!"</code><code class="php"># All this code is just for demonstration purposes
React::setApiKey("In here goes your api key!");</code>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
So to say it again, what i need to do is to fill create 1 div / id_section and to fill it with the
descrition for now.
Change:
ng-repeat="docs in docs"
to:
ng-repeat="doc in docs"
Also, in your code you have a call to {{ doc.des }}, which probably should be {{ doc.description }}
I have created a code and I'm repeatable in text with icon.
You see the img but I want to hide to this actually I show this image if I have a anchor link than show if I have no link than not show this image. Is this possible in angular js?
My code is:
Angular Code is
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function($scope) {
$scope.items = [
{
"title":"Book" ,"subtitle":[
{"subtitle":"PanchTantra ",
"description":"Kids Books",
"authorName":"Kisna"
}
],
"description": "Some Book is very Good."
},
{
"title":"Mediciane Book" , "subtitle":[
{"subtitle":"Pharmacy", "description":"This book is related to Docotrs"}
],
"description": "This book is very hard"
},
{
"title":"Reciape Book" , "subtitle":[
{"subtitle":"Khana Khajana", "description":"This book is related to Foods"}
],
"description": "This book is nice..."
},
{
"title":"Computer Book" , "subtitle":[
{"subtitle":"BCA MCA", "description":"This book is related to Education"}
],
"description": "This book is very beautiful."
}
];
});
HTML Code is
<body ng-app="myFapp">
<ul ng-controller="myControler">
<li ng-repeat= "item in items">
<div>{{item.title}} </div>
<div>{{item.description}}</div>
<ul>
<li ng-repeat="subtitle in item.subtitle">
<div>{{subtitle.subtitle }} <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}} </div>
<div>{{subtitle.description}} this is </div>
</li>
</ul>
</li>
</ul>
</body>
Plunkr link is
Is this what you want to do ?
<div>{{subtitle.subtitle }} <img src="https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=32&d=identicon&r=PG" />{{ subtitle.authorName}} </div>
http://plnkr.co/edit/6tnGlTLeLUZdiGCUHDFV?p=preview
The ng-show directive allows you to show or hide the given HTML element based on the expression provided.
See the Official doc