i want to iterate through array elements and print them one by one.
currently i have this HTML code.
<div data-ng-repeat="i in range">
<div ng-repeat="rhit in hits[i]">
<p > {{ rhit }}</p>
</div>
</div>
here
"range" is an array with values till 100([0,1,2,....,100])
"hits" is an array containing more than one element
if i try separately printing like this, it works
<p > {{ hit[0] }}</p>
<p > {{ hit[1] }}</p>
<p > {{ hit[2] }}</p>
i also tried this code but it doesn't print anything.
<div ng-repeat="rhit in hits">
<p > {{ rhit }}</p>
</div>
this is my actual query result
"aggregations": { "by_id": { "doc_count_error_upper_bound": 0,
"sum_other_doc_count": 0, "buckets": [ {
{"key":"60","doc_count":21,
"tops":{
"hits":{
"total":21,"max_score":2.2237754,
"hits":[{"_index":"automatch_testing","_type":"temp_135","_id":"AVU7i0nnXK6g_oqHu-az","_score":2.2237754,"_source":{"t_pacs_id":"34","t_id":"60","matching":"MO"}},
{"_index":"automatch_testing","_type":"temp_143","_id":"AVU7iOSeXK6g_oqHu-XY","_score":2.2237754,"_source":{"t_pacs_id":"30","t_id":"60","matching":"MO","t_match":"matched"}},
{"_index":"automatch_testing","_type":"temp_135","_id":"AVU7i0nlXK6g_oqHu-ay","_score":2.2237754,"_source":{"t_pacs_id":"28","t_id":"60","matching":"MO","UICriteria":"135","t_match":"matched"}}]}}}
here i want to print the field "t_pacs_id" of each document in hits...
is there any way the above code can be run?? please suggest.
many thanks.
here is the plunker
If you are interested to get the hits collection ith place then you could directly do hits[i] instead of having another ng-repeat
<div data-ng-repeat="i in range">
<p> {{ hits[i] }}</p>
</div>
You say that separately printing something like this works:
<p > {{ hit[0] }}</p>
In that code, you are accessing an array named "hit", but in your code that does not work, you are using ng-repeat to iterate over an array named "hits". What do you get when you try:
<div ng-repeat="rhit in hit[i]">
Related
I made a form with the FormBuilder of Symfony.
When I put my form in twig, the form_start(form) and form_end(form), it add a tag for each input.
I don't understand why twig adds a tag.
What is the solution to remove this tag
Thanks for your answer :)
Also, my formbuilder is like that :
->add('title', TextType::class, array(
'label'=>false,
'attr'=>array('autofocus'=>true)
))
my twig is like that :
{{ form_start(form) }}
<div class="row">
<div class="col-sm-9 p-1">
{{ form_row(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
</div>
<div class="col-sm-1 pt-2">
<button type="submit" class="btn btn-success btn-circle btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
{{ form_end(form) }}
and the result in the html source code is :
<div class="row">
<div class="col-sm-9 p-1">
<div>
<input type="text" id="app__title" name="app_[title]" required="required" class="form-control" placeholder="Description" title="Description">
</div>
</div>
</div>
So Twig add the
<div>
that I don't want. How can I remove this autocompleted tag?
I tried the
{% do form_record.title.set rendered %}
but maybe I think that it does not work.
Edit: Okay it seems I misunderstood the issue at first.
I thought you wanted to hide a field you had in your form which can be done with
{% do form.myField.setRendered %}
Now that I understand the issue, I believe it comes from the way your field is being printed.
There are 3 main components to a form field.
Label: form_label(form.field)
Widget: form_widget(form.field)
Errors: form_errors(form.field)
There is a way to print all three components at once. The function is
form_row(form.field)
Here comes the culprit: form_row(). Because it normally prints 3 different components, it adds a div around it!
Futhermore, by looking at the form type and seing 'label' => false, I can say that the label was printing at first using form_row.
To avoid having to define 'label'=>false everytime, you can simply print your form field in this manner:
{{ form_widget(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
You can simply omit {{form_label(form_record.title)}} and it won't print.
On the other hand, I also noticed something that might be okay but seem wrong with the given example.
In the twig you shared, the form starts with {{ form_start(form) }} but then the field is {{ form_row(form_record.title)}}.
From where I come from form_record is undefined here. I would use {{ form_row(form.title)}}
Anyways, the explanation for the difference between form_row and form_widget can be found here: Symfony form differences between row and widget
Enjoy!
So I have a ng-repeat which I am parsing through an array propRentDetail. It prints out some divs with the property name and its rent.
I have also used orderBy : '-trent', so that it shows the property first which has the highest rent and goes down. Now, I have an up arrow icon from fontAwesome and I was trying to show that only with the first property div (i.e. the one with the highest rent). So how do I show something only for the first item?
<div ng-repeat = "summ in propRentDetail | orderBy: '-trent'">
<p>{{ summ.propname }}</p>
<p>{{ summ.proprent }}</p>
</div>
Use $first like this:
<div ng-repeat = "summ in propRentDetail | orderBy: '-trent'">
<div ng-if="$first">icon</div>
<p>{{ summ.propname }}</p>
<p>{{ summ.proprent }}</p>
</div>
inside ng-repeat, AngularJS expose a variable named $first, its value is type boolean which refers if the item is first on the list.
<div ng-repeat = "summ in propRentDetail | orderBy: '-trent'">
<i class="fa fa-arrow" ng-if="$first"></i>
<p>{{ summ.propname }}</p>
<p>{{ summ.proprent }}</p>
</div>
You can also use $index if you want
<div ng-repeat = "summ in propRentDetail | orderBy: '-trent'">
<i class="fa fa-arrow" ng-if="$index === 0"></i>
<p>{{ summ.propname }}</p>
<p>{{ summ.proprent }}</p>
</div>
Other variables available inside ng-repeat:
$last
$even
$odd
I'm quite new to Angularjs, and I'm doing an $http.get from a json. I've gotten the response and it works. The only problem is that I have to hard-code the handlebars rather than do a ng-repeat
{{country.results[0]["breakfast/_text"][1] }}
{{country.results[0]["breakfast/_text"][2] }}
{{country.results[0]["breakfast/_text"][3] }}
{{country.results[1]["breakfast/_text"][1] }}
{{country.results[1]["breakfast/_text"][2] }}
{country.results[1]["breakfast/_text"][3] }}
{{country.results[1]["breakfast/_text"][4] }}
{{country.results[2]["breakfast/_text"][1] }}
{country.results[2]["breakfast/_text"][2] }}
{{country.results[2]["breakfast/_text"][3] }}
{{country.results[3]["breakfast/_text"][1] }}
{{country.results[3]["breakfast/_text"][2] }}
How do I do an ng-repeat for a 2-d json array like this?
You should use two nested ngRepeat directives. This should render it:
<div ng-repeat="result in country.results">
<div ng-repeat="(key, value) in result['breakfast/_text']">
{{value}}
</div>
</div>
I have created a plunker and use ng-repeat for 2D data like this.
$scope.data = [
{'text':[1,2,3]},
{'text':[3,4,5]},
{'text':[5,6,7]},
];
and
<div ng-repeat="result in data">
<div ng-repeat="value in result">
<div ng-repeat="values in value">
{{values}}
</div>
</div>
</div>
This might help you .
The goal is to use the variables defined in the front-matter section in a particular page.
Here my structure of the file system:
_Components
c1.html
c2.html
Here I have defined the attributes in the front-matters.
_Includes > Components
c1.html
Here I want to use a loop to refer to a variable defined in the _Components > c1.html page.
How can I achieve this goal ?
In my _Includes > Components > c1.html I have the following code:
<body class="full">
{% assign fullcomponents = site.components %}
{% for component in fullcomponents | where:"title","c1html" %}
{% component.title %}
{% endfor %}
<div class="container-fluid" id="componentscontainer">
<div class="col-md-12">
<div class="panel panel-primary" id ="panelcomponentlarge">
<div class="panel-heading" >
Chart C3 Line
</div>
etc...
Surely I'm missing some trivial things.
SECOND ATTEMPT
I figured out that I can provide a data layer for that so, I tried to split this information into a new data file.
Here the content of components.json
{
"Components": [
"ChartC3Line":{
"component":"ChartC3Line",
"description":"This is an attempt"
},
"ChartC3Lines":{
"component":"ChartC3Lines",
"description":"This is an attempt"
}
]
}
And I'm trying to get this information with the following code:
{% assign comp = site.data.components.Components[ChartC3Line] %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
but anything is coming up.
THIRD ATTEMPT
I found a solution but I don't like it at all here my new json file
{
"ChartC3":[
{
"component":"ChartC3Line",
"description":"This is an attempt"
}],
"ChartC4":[
{
"component":"ChartC3Line",
"description":"This is an attemptSSSSSSS"
}]
}
I don't want to have an object of several arrays of one element!
Here the code to retrieve the right information:
{% assign comp = site.data.components.ChartC4[0] %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
SOLVED
Following the structure of a json file, I changed my structure in an easier way:
{
"ChartC3":
{
"component":"ChartC3Line",
"description":"This is an attempt"
},
"ChartC4":
{
"component":"ChartC3Line",
"description":"This is an attemptSSSSSSS"
}
}
Now I can easily have access to the right object.
{% assign comp = site.data.components.ChartC3 %}
HTML:
{% highlight html linenos%}
<p> Description: {{ comp.description }} </p>
I am just starting off with angular, but basically I want to render one set of templates with ng repeat:
<ion-item ng-repeat="item in items" ng-click="loadSingle(item)">
Hello, {{item.name}}!
</ion-item>
and then later I want to render the object in a different template if someone clicks on it:
<div>
<h1>{{ item.name }}</h1>
<h2>{{ item.detail }}</h2>
</div>
How do I do this? With jQuery/underscore I would just have the separate template loaded and feed it the json object (item) but I can't seem to find any documentation on how to do the templating without the ng-repeat. I'm a little confused. Thanks!
I would define loadSingle() as a method that would put the specific item onto the scope. Then I would define another section in the HTML to display the selected item.
JavaScript
app.controller('ctrl', function($scope){
$scope.loadSingle = function(item){
$scope.selectedItem = item;
}
});
HTML
<div ng-show="selectedItem">
<h1>{{ selectedItem.name }}</h1>
<h2>{{ selectedItem.detail }}</h2>
</div>