In my controller I assign:
$scope.currentThing.data
And in my template sometimes I need
currentThing.data.response[0].hello
and sometimes
currentThing.data.otherStuff[0].goodbye
//or
currentThing.data.anotherThing[0].goodMorning
So I was wondering if it is possible to create a shortcut for this variables straight in the templates, something like:
{{response = currentThing.data.response[0]}}
So that I can use it like this {{response.hello}}.
In general, is it possible to assign temporary variables from the template? I don't need to have any data-binding, I would need them only for generating the template and then they can disappear forever
You can do that in controller like here: http://jsbin.com/moyuhe/1/edit
app.controller('firstCtrl', function($scope){
$scope.currentThing = {
data: [
{response:[
{hello:1},
{hello:2}
]}
]
};
$scope.temp = $scope.currentThing.data[0];
});
HTML:
<div ng-controller="firstCtrl">
{{temp.response |json }}
</div>
You might be able to use ngInit: https://docs.angularjs.org/api/ng/directive/ngInit
Although it seems that using it outside of ngRepeat is frowned upon.
<div ng-init="myvar = currentThing.data.response[0]">
<span>{{myvar.hello}}</span>
</div>
I haven't tested it like this but that's the closest thing I can think of that may solve your problem.
Yes, it is possible using syntax like
{{ variable = ( expression ) }}
anywhere in HTML template (not just ng-init as some suggest).
It is exceptionally useful in cases when you need to use a calculated variable more times - it does not need to be calculated each time.
Some example
<!-- can use it before -->
<p> Calculated value is {{calculated}} </p>
<div ng-repeat=" item in calculated = ( allItems | filter1 | filter2 | filter3 ) ">
{{item}}
</div>
<!-- can use it after-->
<p> Calculated value is still {{calculated}} </p>
Edit: so in your case
{{response = ( currentThing.data.response[0] ) }}
Related
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
<div ng-repeat="(key,x) in selectedPoll.questions">
<p>{{x}}</p>
<p>{{key}}</p>
<canvas chart-directive data="arrayResult.{{key}}" id="{{ $index }}">
</canvas>
</div>
When i use {{key}} in global scope for chart-directive, {{ $index}} is not accessible, although when i delete {{key}} and leave just arrayResult, ng-repeat is working.
Explanation: i use id {{ $index }} which is searched by chart-directive for each x in ng-repeat, thanks to this i can create as many chart-directives as i need.
Then in order to everything work properly i have to pass proper dataset, each dataset for chart-directive has the same ending as {{ key }} of x in ng-repeat so for example:
data="arrayResult.q1 "
to make it dynamic i would like to switch it to:
data="arrayResult.{{ key }}
but when i add {{ key }} ng-repeat stop with one result which as i assume is happening because it cannot read id value of {{ $index }}
It is the first time i use key and $index with ng-repeat, and it is first time when i repeat custom directive, so i don't know if the problem is with repeating custom directives or rather wrong use of {{ key }} value.
Just when i added the question some solution came to my head, it could be that it is happening because in my custom directive my scope.data looks like this
scope: {
data:'='
},
So If I am right if somebody can tell me if it is possible and if it is how to make scope data open for expression like this "arrayResult.{{ key }} ??
Using # is only relevant if your chart data are strings.
You can keep the = of your directive, but you need to change:
data="arrayResult.{{key}}"
into this:
data="arrayResult[key]"
The curcly brackets will only work with a # scoping indeed, but you would get the string "arrayResult.q1" instead of the actual value of what is in arrayResult.q1, so = is the way to go.
See a snippet simulating it below:
angular.module("test", []).controller("test", function($scope) {
$scope.questions = {q1: "do you like apples?", q2: "do you like bananas?"};
$scope.arrayResult = {q1: true, q2: false};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<div ng-repeat="(key,x) in questions">
<p>question: {{x}}</p>
<p>key: {{key}}</p>
<div>result: {{arrayResult[key]}}</div>
</canvas>
</div>
</div>
See this plunker.
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
You are now seeing details of <span ng-init="subCats = subCats + ' ' + subCategory.name">{{subCats}}</span>
</div>
This HTML page shows a filtered result from an object. However, I want to display a consolidated result of the names after "You are now seeing details of" like for example, "You are now seeing details of jim tom". This consolidated list should appear after the element which has ng-repeat directive.
How can this be done?
Thanks
I made an updated plunker for you.
Please try to make your example plunker way more reduced to the specific problem in the future as this helps us to help you.
First I added the search binding as filter to the ng-repeat to make the filter workable:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id'">
To avoid executing the filter twice you can save the filter result directly into a scope variable by simply assinging it (in my example to subCategorysFilter):
<div ng-repeat="subCategory in subCategorysFilter = (subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id')">
I further changed your getAllFilteredNames() method to take a filter object as argument and made it loop through the results, build an array of the names and join them with a , as separation:
$scope.getAllFilteredNames = function(filter){
var names = [];
angular.forEach(filter, function(element){
names.push(element.name);
});
return names.join(", ");
};
This is now called outside the ng-repeat directive:
You are now seeing details of {{getAllFilteredNames(subCategorysFilter)}}
Have fun!
Update
Two possible solutions for getting a multilined output:
1 - You might change the line
<div>You are now seeing details of {{getAllFilteredNames(subCategorysFilter)}}</div>
to
<div>You are now seeing details of <span ng-bind-html="getAllFilteredNames(subCategorysFilter)"></span></div>
Then any html tags within the expression are compiled as html code. But there are meaningful reasons for angular disabling this feature by default. If your objects are editable by users you need to prevent them from breaking your design by escaping all html tags...
2 - But if you do not need to display the cosolidated information within a single string, you might simply use another ng-repeat combined with an <ul> like this:
<div>You are now seeing details of <br/>
<ul>
<li ng-repeat="subCategory in subCategorysFilter">{{subCategoryName}}</li>
</ul>
</div>
Just style your li accordingly to be displayed underneath each other and you're ready to go.
You can do this in your HTML by moving your consolidated list outside of the ngRepeat and calling the filter again:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
</div>
<div>
You are now seeing details of
<span ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.name}}
</span>
</div>
The drawback to this approach is that you are calling the filter twice. A better alternative would be to set up a $watch in your parent controller and invoke the $filter manually. I.e. Save the filtered results in a scope variable. The benefit is that the filter is called half as many times and the scope variables you set up are visible to the original list and the consolidated list.
app.controller('ParentController', function($scope, $filter) {
$scope.subCategorys = [{...}];
$scope.tag = {...};
$scope.$watchCollection('subCategorys', function(newList){
//if the collection changes, create a new tag
//reference that is a copy of the old one to trigger
//the tag watch listener
if (newList)
$scope.tag = angular.copy($scope.tag);
});
$scope.$watch('tag', function(newTag){
// if tag changes, apply the filter,
// and save the result to a scope variable
if(newTag)
$scope.filteredList = $filter('filter')
($scope.subCategories, { tags: newTag}, true);
});
});
HTML
<div ng-controller="ParentController">
<div ng-repeat="subCategory in filteredList | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
</div>
<div>
You are now seeing details of
<span ng-repeat="subCategory in filteredList | orderBy:'id'">
{{subCategory.name}}
</span>
</div>
</div>
I'm afraid there is no way of doing that except for selecting the subCategory back. Fortunately, there is a pretty elegant 'angular' way of doing that. Add this to your controller:
$scope.getSubCatById = function(someId) {
return $filter('filter')($scope.subCategorys, {id:someId})[0];
}
And then your html:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | orderBy:'id'">
{{subCategory.id}} {{subCategory.name}} {{subCategory.tags}}
<br/><br/>
You are now seeing details of {{ getSubCatById(2).name }}
</div>
I hope I interpreted your question correctly.
I am trying to use the visible data binding with a negation and it does not seem to work.
I found several questions in stackoverflow which specify that the NOT binding should be used as an expression. But in my case i am just using the length property, so i am not sure how to use an expression. Here is my example
<div class="form-group" data-bind="visible:!users.length == 0">
<span>Some message here...</span
</div>
<div class="form-group" data-bind="visible:users.length > 0">
<span>User data grid here...</span
</div>
I'm guessing users is an observableArray and therefore you should be doing this:
data-bind="visible:users().length !== 0"
An even better and more clear intent would be to create a computed property on your view model and bind to that instead:
showUsers = ko.computed(function(){
return _this.users().length > 0;
});
Then your bindings become:
data-bind="visible:showUsers"
Or
data-bind="visible:!showUsers()"
Here is a jsFiddle showing a full example using various techniques.
I need to keep a "colcounter" variable inside the loop that will be used to fill a jsrender template.
Here is my template code
<script id="datascapeTemplate" type="text/x-jsrender">
<div id="dsViewport">
<div class="ds-column" style="width:{{:(name.length*100)}}px;">
<h1 id="datascapeName">{{:name}}</h1>
<div><span id="dsToggle">toggle</span></div>
</div>
{{=colcounter}}
{{for sections}}
<div class="ds-section">
<h3>{{:label}}</h3>
<div class="ds-column" id="start">
{{for items}}
{{* if (colcounter > 4){
colcounter = 1;
}}
</div>
<div class="ds-column" id="start">
{{* } }}
{{*
if ( data.selected || datascape.showInvisible) { }}
<div class="ds-item {{* if (data.featured){ }} nowActive {{*} }} {{* if (data.active){ }} nowActiveRed {{*} }}" background="{{:background}}" bgcolor="#000000" fgcolor="#FFFFFF">
<div class="ds-item-container">
<h4>{{:title}}<br/>{{:time}}</h4>
<p><a item="{{:id}}" href="{{:url}}" class="itemLink">view file {{:colcounter}}</a></p>
</div>
</div>
{{* colcounter++; }}
{{* } }}
{{/for}}
</div>
{{* colcounter=1; }}
</div>
{{/for}}
{{* colcounter=1; }}
</div>
</script>
Unfortunately, it prints, on the very first iteration of the loop "Error: colcounter is not defined.". Afterwards it works.
It seems the way i initialise my colcounter variable is not working but i fail to find the correct way. var colcounter =0 does not work.
UPDATE
jsfiddle: http://jsfiddle.net/ZX6Mk/
colcounter works now. I declared it in the global scope. But I have an issue with datascape.showInvisible. It also triggers the error
Error: Cannot read property 'showInvisible' of undefined.
Thank you for your time,
a.
I took your fiddle and made a few changes. http://jsfiddle.net/johnpapa/bLSkz/
The toggleButton was being referred to in jQuery without the #. So I added that.List item, otherwise the click was not being captured.
Your fiddle did not reference jQuery nor JsRender, though you were using both, so I added them. (I assume you never ran the fiddle)
There was no datascape.showInvisible property, so I created one.
I passed showInvisible to the inner for loop using a parameter, so it could be accessed in its context.
{{for sections ~showIt=showInvisible}}
{{if (editorspick_amount > 0 || ~showIt)}}
The template you were trying to render did not exist, so I changed the rendering code to use the script tag you created. This also sets the allowCode=true, which is required to safely turn on the allowCode feature.
$.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true });
$('#toggleButton').click(function(){
if(!rendered){
rendered = true;
$("#datascape").html(
$.render.myTmpl( datascape.json )
).show();
}
});
I changed one place where you used {{* }} to instead use an {{if}} block since there was no need to use allow code.
This allowed all of the code to run and the template to render, though I admittedly did not follow all of what you were trying to do.
Hope this helps.
One suggestion ... the allowCode feature makes for really ugly templates and hard to maintain and read. I highly recommend replacing it with helper functions (or other constructs). For example, you used allowCode to create the styling for some elements. You could have used a custom tag for this instead, and moved the logic to javascript and simplified your template. The colcounter could be moved to a helper function. It's just much more readable to move the logic to javascript, and keep the template/html clean. Just my 2 cents :)