I am trying to filter a JSON list based on one of the contained values. For example, I have JSON objects where they all have name, type, description etc and I am attempting to filter based on the parameter stored in $stateParams (which happens to be type). It works if I hard code the type (e.g. "item in items| filter:{Type:'Grain'}").
Also, I know the value from $stateParams is working as I have it set to the page title. Is there a problem with my below syntax?
<div class="list card">
<div ng-repeat="item in items| filter:{Type:'{{type}}'}">
<a class="item item-icon-left" ng-click="onSelectItemList(item)">
<i class="icon ion-home"></i>
{{item.Name}}
</a>
<div>
Thanks in advance.
Yes, the problem is the filter expects an expression, You should not interpolate ({{) the expression to value.
change
filter:{Type:'{{type}}'}
to
filter:{Type:type}
type is expression evaluated against scope and {{type}} --> Value of expression evaluated against the scope.
Use:
<div ng-repeat="item in items| filter:{Type:type}">
You can't do nested interpolation. Filter is expecting an expression, therefore type is evaluated as is.
Related
I have template, which contains simple icon template:
<span class="icon {{unbound pperson.medical.diseases '=' 0 'hidden'}}">
<img class="icon" src="/assets/img/icons/icon.svg
</span>
As can be seen I need a flag to show/display it and I'm using hidden class for it. And I have data-array 'diseases'. So if it's empty I should not display icon, if it's not empty I should display this icon. I tried condition:
{unbound pperson.medical.diseases '=' 0 'hidden'}}
This gives error. I found that it was possible to write ember handle bar function and to use but I would like to find inline approach without creating aditional functions. is it possible?
Seems I found solution. Probably on page load diseaseases didn't exist so I added null-undefined check. not it seems to be working
<span class="icon {{unbound (unless (or null-undefined pperson.medical.disease pperson.medical.diseases.length '=' 0 ) 'hidden')}}">
Ember considers an empty array as falsely. So you should be able to do this:
<span class="icon {{unless pperson.medical.diseases 'hidden'}}">
<img class="icon" src="/assets/img/icons/icon.svg
</span>
Personally I feel that relying on the different truthiness of Handlebars templates compared to regular JavaScript makes the code more difficult to read. And Ember.js may change the template syntax to match JavaScript truthiness more closer. So I would recommend checking the length of the array instead. 0 is considered falsely just as in JavaScript.
<span class="icon {{unless pperson.medical.diseases.length 'hidden'}}">
<img class="icon" src="/assets/img/icons/icon.svg
</span>
The {{unbound}} helper is only needed if you want to prevent your template reflecting changes in application state. {{unbound pperson.medical.diseases}} would cause the user interface not to change if items are added or removed from diseases array. This is nearly never what you want. The official template linting rules forbid usage of {{unbound}} as part of their recommended set.
{{unbound pperson.medical.diseases '=' 0 'hidden'}} is not a valid statement assuming that you haven't overloaded the default {{unbound}} template helper. I assume that you are missing something an {{if}} or {{unless}} condition in that snippet and a custom helper, which supports comparison with pperson.medical.diseases '=' 0.
I am iterating through a dictionary (called in from a .json file) and would like to check an attribute of my props with a value in the dictionary. In my first div I am setting the variable attribute to be one of the values in the dictionary. This attribute variable has the value "event" which is exactly what I want.
In the inner div, the props.item.${attribute} code is not evaluating to props.item.event, which is what I thought it would. Is there any way to interpolate the value of this variable to my props statement?
<div
v-for="data in dict"
:set="attribute = data.targetAttr"
>
<div v-if="props.item.attribute == data.key">
<a
:href="data.response"
target="_blank"
>
More Info
</a>
</div>
</div>
I have tried looking at the resource here, but the answer is only in relation to effectively mapping over lists, which is not exactly my problem.
VueJs - How to use variable in v-if?
In that case, you should try the following
<div v-if="props.item[attribute] === data.key">
Using Laravel for my API and the error response is like this:
I set that as a scope called errors and do a ng repeat to show them:
<ul ng-show="errors" class="list errors-list">
<li class="item" ng-repeat="error in errors">{{error}}</li>
</div>
However, this results in:
["The title field is required."]
Is there a 'best' way to just get the text and not the speech marks or brackets?
I know I can just search and replace them but always like to know if there is a best way to do something.
Just pull the first element
<ul ng-show="errors" class="list errors-list">
<li class="item" ng-repeat="error in errors">{{error[0]}}</li>
</div>
Quoting the documentation of AngularJS expressions, these are examples of valid expressions in Angular:
1+2
a+b
user.name
items[index] <--- This is what we're using for this answer
I want to catch the first iteration in ng-repeat directive:
<div ng-repeat="product in products">
<div is-open="{if "[[$index]]" == 0}true{else}false{/if}">
...
</div>
</div>
But it doesn't work. Setting 0 as string also doesn't work. Comparing in angular also doesn't work.
How can I do that?
Try:
<div is-open="{{$index == 0}}"></div>
You should use special property $first of ng-repeat with ternary operator. Like see below snippet
<div ng-repeat="product in products">
<div is-open="($first) ? true : false">
...
</div>
</div>
I suppose smarty code will not work as you're expecting. Smarty is a server side programming language and angular runs on client side. In your query, smarty tags are unnecessary being called in angular directive. Above trick will work for you.
There are also some couple of special properties available too. You can check them out here
In my view, I have the below code to display some data from angular scope variables. The first two lines work fine. They display data from the scope variables but the line from ng-if does not display. What is wrong with my ng-if condition?
<div ng-controller="PaymentCtrl">
<h3>Payment successfully posted {{PaymentID}}</h3>
<h3> Receipt number {{ReceiptNumber}} </h3>
<div ng-if="{{ReceiptNumber}}">
<h3>Receipt generated with receipt number {{ReceiptNumber}}</h3>
</div>
</div>
As mentioned, ngIf takes an expression.
<ANY ng-if="expression"> ... <ANY>
See the AngularJS expression docs for more information on what this entails exactly. In your example, you are instead supplying an interpolated value. Try the following...
<div ng-if="ReceiptNumber">
<h3>Receipt generated with receipt number {{ReceiptNumber}}</h3>
</div>
JSFiddle Link - demo comparing both wrong and correct appreach