So I'm trying to create a simple tab system in angularjs, but whenever I try to bind data on ng-click on the a or li tags of my template I get this error:
Syntax Error: Token '' {1} at column {2} of the expression [{3}] starting at [{4}].
I been searching for hours can't figure out what's causing the problem
here's my code:
<div id="tabs">
<ul>
<li ng-repeat="file in files" ng-click="tab = {{$index}}">
{{file.file_name}}.{{file.file_extension}}
</li>
</ul>
</div>
<!-- tab container -->
<div class="tab-content">
<div class="tab" ng-repeat="doc in files" ng-show="tab == {{$index}}">
{{doc.file_name}}.{{doc.file_extension}}
</div>
</div>
I have tried wrapping {{$index}} in single quotes, that fixes the problem but the tabs don't work when clicked.
You could move this out of the inline logic and into a function, for example $scope.setTabIndex, like so:
$scope.setTabIndex = function(index) {
$scope.tab = index;
}
And then in your markup:
<li ng-repeat="file in files" ng-click="setTabIndex($index)">
And for the ng-show, just remove the curly braces around $index:
<div class="tab" ng-repeat="doc in files" ng-show="tab == $index">
Here's as jsBin
Related
I want to show errors with alerts using bootstrap, how do I do with vuejs?
This is my code:
<div v-if="this.getError">
<div v-for="(_errors, key) in this.getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error}}</li>
</ul>
</div>
</div>
And This is Json :
https://i.stack.imgur.com/AkBmJ.png
Try to remove "this" keyword in your template. It causes some issues there, specially with v-for loops.
<div v-if="getError">
<div v-for="(_errors, key) in getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error}}</li>
</ul>
</div>
</div>
I have unordered list in which I want different different class for each li which will be dynamic.
my code is
$scope.className = ['clr1','clr2','clr3','clr4','clr5'];
My Html :
<div>
<ul>
<li ng-repeat="item in mainitem" ng-style="{color: color[$index]}" >
<span ng-class="{className [$index]}">{{ item.name}}</span> // At this line I ahve added dynamic class but its not working
</li>
</ul>
</div>
This is not applied class as per classname array !!
Is there any issue with this code ? Thanks for helping !!
you can use [] instead of {}
<div>
<ul>
<li ng-repeat="item in mainitem" ng-style="{color: color[$index]}" >
<span ng-class="[className[$index]]">{{ item.name}}</span>
</li>
</ul>
</div>
for example of working see this codepen codepen
As the code is posted in the question, you are missing an opening brace when evaluating the class name
<span ng-class="{className [$index]}">{{ item.name}}</span>
should be
<span ng-class="{{className [$index]}">{{ item.name}}</span>
when it doesn't evaluate, you will end up with no class at all
I'm trying to figure out how I can take the following view.html below, and test for the column and row position (.col , .row) if the first element/tile.
<div class="container" gridster="gridsterOpts">
<ul>
<li>
<tile tilevalue="{{tile.tileId}}" gridster-item="tile" row="{{tile.row}}" col="{{tile.col}}" size-x="{{tile.sizeX}}" size-y="{{tile.sizeY}}" ng-repeat="tile in selectedTiles"/>
</li>
</ul>
</div>
Any ideas how this can be done? I don't know how to use the repeater call, i'd imagine that's where the solution is derived.
Since this is a Protractor-specific question - you can use the built-in by.repeater() locator and get the first() element:
var firstTile = element.all(by.repeater("tile in selectedTiles")).first();
Then, to get the row and col attribute values, use getAttribute():
firstTile.getAttribute("row").then(function (row) {
console.log(row);
});
firstTile.getAttribute("col").then(function (col) {
console.log(col);
});
Or, if you want to assert the values:
expect(firstTile.getAttribute("row")).toEqual("0");
expect(firstTile.getAttribute("col")).toEqual("0");
The ng-repeat call in Angular simply generates the appropriate html to display the relevant information. As such, your ElementFinder (or ElementFinders) simply need to select the row, col that you need using ByCss.
See the example from w3schools and inspect the result. http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array
You'll see that the following angular code
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
Creates this html:
<ul>
<!-- ngRepeat: x in names -->
<li class="ng-binding ng-scope" ng-repeat="x in names">Jani</li>
<!-- end ngRepeat: x in names -->
<li class="ng-binding ng-scope" ng-repeat="x in names">Hege</li>
<!-- end ngRepeat: x in names -->
<li class="ng-binding ng-scope" ng-repeat="x in names">Kai</li>
<!-- end ngRepeat: x in names -->
</ul>
So your ElementFinder will be:
element(by.Css('ul li'));
or
element(by.Css('ul li tile'));
I have the following code in my HTML View:
<div ng-repeat='shop in shops'>
<ul ng-repeat='item in items'>
<li>
<!-- {{Show items of the particular shop in here}} -->
</li>
</ul>
</div>
The items is a JSON Object. Every item has a shop_id that has to be used to do the sorting.
According to the documentation, I understand that I cannot use the if control statement in an Angular Expression to achieve what I the sort. How else can I use the control statement.
I tried this, but it obviously failed because we cannot return a continue.
//var resources.items and resources.shops are JSON objects output from a database
//This file is app.js
$scope.itemName = function(itemIndex, shopIndex) {
for (var i = 0; i < resources.items.length; i++) {
if (resources.items[itemIndex].shop_id == resources.shops[shopIndex].id)
return resources.items[itemIndex].name;
};
return continue;
}
And, this in the view:
<div class="tab-content" ng-repeat='provider in providers'>
<ul ng-repeat='item in items'>
<li>{{itemName($index, $parent)}}</li>
</ul>
</div>
I'm a beginner in Angular. Please help out.
Use the ngIf directive:
<div ng-repeat='shop in shops'>
<ul ng-repeat='item in items'>
<li ng-if="item.shop_id === shop.id">
<!-- {{Show items of the particular shop in here}} -->
</li>
</ul>
</div>
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>