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">
Related
I have a template that contains the following fragment:
<spark class="col-12" value="80"></spark>
I also have a variable accessible to this template as {{ratio}} such that if I change my fragment to:
<spark class="col-12" value="80"></spark>
Ratio: {{ratio}}
the correct ratio will be displayed on a page.
This is what does not work:
<spark class="col-12" value="{{ratio}}"></spark>
which results in "{{ratio}}" string being displayed.
Any ideas ?
You should be using the built-in directives for adding attribute values from the scope, for example ng-src, ng-style, ng-href, so on.
Documentation for the built-in directives
Will ng-attr work for you? ng-attr-value="{{ratio}}"
https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
I'm using angular grid -
let's say i have a scope object as follows:
$scope.test = 3
If I want to dynamically set an html id, I would do something like this:
<div id="{{test}}"></div>
Checking the DOM, I see the following:
<div id="3"></div>
For my angular grid, I want to do something like this:
<div ag-grid="{{test}}"></div>
Checking the DOM I literally get:
<div ag-grid="{{test}}"></div>
Is there a way around this?
You can use ngAttr and do this like the following:
ng-attr-ag_grid="{{test}}"
Please check if this helps
Use
<div ag-grid="test"></div>
Check following link and check first example html file forag-grid tag with binding variable
Note: Based on example test should be object not string or other type.
Is {{ }} necessary?
You can try:
ag-grid="test"
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.
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
I'm using jQuery templates to build a tree. It works very well so far, but I came across an issue when trying to determine if an item is at the root level or not.
I use a template similar to that of render tree items:
<script id="tree-row-tmpl" type="text/x-jquery-tmpl">
<li>
<div class="row ${NodeType}">
${Name}
</div>
{{if expanded}}
<ul>
{{tmpl($data.chidren || []) "#tree-row-tmpl"}}
</ul>
{{/if}}
</li>
</script>
Now in the link click handler I try to determine root node using:
if($.tmplItem(this).parent)
It turned out the root tmplItem.parent is not null (as I expected), but contains an object with two properties: {data:{}, key:0}.
I see that I can check item.parent.parent or one of the properties which exist in regular tmplItem and missing in the root object. But this seems like a kind of hack for me - I'd prefer finding an "official" way of verifying a tmplItem whether it's empty or valid.