I have created ng-repeat by group on which I am applying the filter, everything is working fine but the search functionality is not doing well, means when I am searching an item then its displaying the item but along with other group names are displaying which I want to hide.
when I search for an item then it should display the item along with the group and hide all the groups and other items.
Below is the
<div ng-repeat="(key, value) in pops | groupBy: 'Location'">
<div>
<h4>{{ key }}</h4>
</div>
<br /><br /><br />
<div ng-repeat="pop in value | filter: lookfor | orderBy: 'SortNo'">
<div>
<h4 style="padding-left: 5px; padding-right: 5px;">{{pop.EmpName}}</h4>
</div>
<div>
<div>
<p>Id: {{pop.EmpNo}}</p>
<p>Desig: {{pop.Designation | titlecase}}</p>
</div>
</div>
</div>
</div>
code.
add your js code pls . Or you can create
<input ng-model="lookfor "/>
Try using this and add your filter code in it
HTML
<input type='text' placeholder='look for' ng-model='lookfor'>
Jsfiddle demo
Related
I created a for using handlebars to get the values from my bank, the search is coming correctly but when trying to select one of the city options it returns me undefined
I believe it is something in this style, but could not apply in my code
Handlebars & Jquery: Dynamically generated ids
$(document).on("click", "[data-trigger='save']", function (evt) {var commentID = $(this).prev().data("comment");});
{{#each cidade}}
<div class="card mt-4">
<label for="bott"><button class="btn" name="cid" id="cid" data-trigger="save">
<div class="card-body">
<small>{{estado}} - {{ativo}} </small>
<input type="hidden" data-comment ="{{#index}}" name="idcid" id="idcid" value="{{_id}}">
</div>
</button>
</label>
</div>
{{else}}
<h4 value="0">Nenhuma cidade registrada</h4>
{{/each}}
<input type="text" id="cidade" name="cidade" class="form-control" disabled>
The question is to take the id value and the name of the selected button and put the related name in the input text
If you need to add information let me know because I'm new here and I'm using google translator for this conversation
thanks in advance
In my vuejs project I have a form section to add facilities and appliances to a house. There is an input field to input a facility and button to add it to a list, but I am a bit unsure how to do this.
My HTML:
<div class="input-wrapper flex align-end">
<div class="input-wrap">
<label for="facility">Add facility like pooltable or swimmingpool</label>
<input type="text" v-model="facility" id="facility" class="bordered border-green" />
</div>
<div class="input-wrap">
<button class="button button-main button-green-light add-button" data-button-type="add" #click.prevent="addFacilities">Add</button>
</div>
</div>
The goal is to make it add the item to a list when clicking "Add" and then empty the input field, so I end up with something like this
<ul>
<li>Pool table<li>
<li>Swimming Pool<li>
<li>Fussball table</li>
</ul>
<input type="hidden" name="facilities" value="pool table, swimmingpool, fussball table" />
You need to use v-for for this case.
in list template part
<ul>
<li v-for="item in items" :key="item">{{item}}</li>
</ul>
in form template part
// .. form items
<input type="text" v-model="input">
<button type="button" #click="addToItems">Add</button>
in vue component js part
data: {
input: '',
items: [],
},
methods: {
addToItems() {
if (!this.input) {
// input value is empty
return;
}
// add item to reactive array items
this.items.push(this.input);
// clear the input
this.input = '';
}
}
See example here: https://codepen.io/Mgorunuch/pen/LYYGmQp
I'm trying to understand data-binding with AngularJs and I'm working on a simple form that uses ng-repeat to render a set of accordions. The headings of each accordion has a status box that is red by default, yet when the accordion is expanded, checking the checkbox within should turn the status box green.
The problem I'm having is that when I check a checkbox, it turns the status box of each accordion heading green; not just the status box relevant to the checkbox.
I know I need to assign a unique model to each status box/checkbox but I'm unsure how. I've seen some examples with $index but I haven't been able to apply it to my problem.
The HTML is as follows:
<ul class="radio-accordion">
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes">
<input id="input{{$index + 1}}" type="checkbox" name="input" />
<div class="radio-accordion-header grey">
<div class="radio-accordion-header-left">
<div class="radio-accordion-header-title-wrapper">
<span class="status-led {{ctrl.checkedStatus}}"></span>
<h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1>
</div>
</div>
<div class="radio-accordion-header-right"></div>
<label class="expander-blue" for="input{{$index + 1}}"></label>
</div>
<div class="radio-accordion-body white">
<div class="padd-10 marg-left40">
<div class="toolbar-flex marg-top-10 marg-bott0">
<input class="restyled"
id="input{{$index + 1}}"
name="input"
type="checkbox"
ng-model="ctrl.checkedStatus"
ng-change="ctrl.setConsent()"
ng-true-value="'green'"
ng-false-value="'red'" />
<label class="restyled-label"
for="input{{$index + 1}}"><em>I like this animal</em></label>
</div>
</div>
</div>
</li>
`
Any help appreciated!
EDIT: This is what I did in case it helps anyone in the future!
<ul class="radio-accordion">
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes" ng-model="animal.checked>
<input id="input{{$index + 1}}" type="checkbox" name="input" />
<div class="radio-accordion-header grey">
<div class="radio-accordion-header-left">
<div class="radio-accordion-header-title-wrapper">
<span ng-class="{'status-led red': animal.checked == false, 'status-led green': animal.checked == true}"></span>
<h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1>
</div>
</div>
<div class="radio-accordion-header-right"></div>
<label class="expander-blue" for="input{{$index + 1}}"></label>
</div>
<div class="radio-accordion-body white">
<div class="padd-10 marg-left40">
<div class="toolbar-flex marg-top-10 marg-bott0">
<input class="restyled"
id="input{{$index + 1}}"
name="input"
type="checkbox"
ng-model="animal.checked"
ng-change="ctrl.isChecked(animal.checked)" />
<label class="restyled-label"
for="input{{$index + 1}}"><em>I like this animal</em></label>
</div>
</div>
</div>
</li></ul>
If you aren't concerned about adding additional properties to your animal objects , or if there already exists a property in those objects that would be used as checkbox indicator just use:
ng-model="animal.SomeProperty"
An alternate way is to use a separate object and use $index as each key:
ng-model="ctrl.checkedStatus[$index]"
I have a nested Objects in JSON, and I need to populate the checkbox based on what comes in (dynamic) from JSON file, meaning, I wouldn't know in advance the name of the fields, or how many elements there could be. Here is a sample, but there could be more child and each child could have more or less item in it.
{
"Parent":{
"Child" :
{
"Child_01" : {
"description_01":false,
"description_02":false,
"description_03":false,
"description_04":false,
"description_05":false
},
"Child_02" :
{
"something_01":false,
"something_02":false,
"something_03":false,
"something_04": false
},
"Child_03" :
{
"things_01":false,
"things_02":false,
"things_03":false,
"things_04":false,
"things_05":false
}
}
}
}
Now, I need to populate a drop down from it, (child_01, child_02, child_03....) and when user choose one of them, I need to display checkboxes of all its properties. And of course be able to keep track of the chosen one.
Here is what I have.
$scope.children = response.data.parent.child;
$scope.childrenList = [];
angular.forEach($scope.children, function(value1, key1){
$scope.childrenList.push(key1);
});
and html:
<div ng-repeat="(key, data) in children">
<input ng-model="childrenListModel" type="checkbox" name="{{child}}" value="{{child}}">{{child}}</input>
</div>
Nothing works the way I intend to. Any help would be appreciated.
You probably need several nested ng-repeats. Have a look at this working plunker: http://plnkr.co/edit/K92JI7UlW9h6gh8SPeU5?p=preview
<div ng-repeat="child in children.Parent.Child">
<div ng-repeat="options in child">
<div ng-repeat="option in options">
<div ng-repeat="(key, val) in option">
<label for="{{key}}">
{{key}}
<input name="{{key}}" type="checkbox" ng-model="option[key]" />
</label>
</div>
</div>
<hr />
</div>
</div>
I'm trying to show the values of a specific JSON in the right Order. My JSON looks like :
{
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}
How to show values with ng-repeat :
<div ng-repeat="item in items">
</div>
like :
A
Andrea
Apple
B
Baby
Bali
C
Candle
Canada
Please check working example: http://plnkr.co/edit/lqoQvmXnimWYzqVU0wkg?p=preview
HTML
<div ng-repeat="(key, values) in items">
{{key}}
<div ng-repeat="item in values">
{{item.name}}
</div>
</div>
you can iterate over the object with:
<div ng-repeat="(key, value) in jsonData">
{{key}}
<div ng-repeat="item in value">
<div>{{item.name}}</div>
</div>
</div>
edit: I see the other guys added jsfiddle so enjoy :)
If your data be like this :
$scope.items={
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}
Consider item as map and iterate for (key,value) in map and the value will be associated List. And again iterate for the list in values as -
<div ng-repeat="(key,value) in items">
{{key}}
<div ng-repeat="item in value">
{{item.name}}
</div>
</div>
Try this plunker.
You print key of your json too so you should use '(key,value)' in ng-repeat to get value of key too.
code:
<div ng-repeat="(key,value) in data">
{{key}}
<div ng-repeat="item in value">
{{item}}
</div>
</div>