This is a simplified idea of my code. $scope.events is an multi-dimentional array and my HTML is:
<div ng-repeat="event in events" >
{{event.owner_id.$oid}} //renders the $oid
<div ng-if="event.owner_id.$oid == 20">
Code to be rendered if true
</div>
</div>
However I get the following error from angular:
Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=a02c36b440519dc1aa6&p1=is%20an%20unexpected%20token&p2=30&p3=event.owner_id."<!-- ngIf: event.owner_id.$oid == 52408a02c36b440519dc1aa6 -->"id%20%3D%3D%20%2052408a02c36b440519dc1aa6&p4=a02c36b440519dc1aa6
How can I solve this?
Since #gonzalo asked it on the comments, I write it:
<div ng-if="event.owner_id.$oid == {{user_id}} ">
is fine if user_id is 20.
But use:
<div ng-if="event.owner_id.$oid == '{{user_id}}' ">
if the user_id is not a integer.
Angularjs tries to parse a string without quotes.
Related
I am getting a [$rootScope:infdig] error but my code actually works. What I am trying to do is load an image or a random placeholder image if one does not exist.
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
<img ng-src="{{v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
Here is the function in $scope:
$scope.getPlaceholderImg = function() {
$scope.placeholderImg = "http://myurl.com/defaultImg" + Math.floor((Math.random()*5)+1) + ".jpg";
return $scope.placeholderImg;
}
One solution is to use the one-time binding operator (::) to stabilize the expression:
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶v̶.̶I̶m̶a̶g̶e̶ ̶!̶=̶=̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶ ̶?̶ ̶v̶.̶I̶m̶a̶g̶e̶.̶s̶p̶l̶i̶t̶(̶'̶,̶'̶)̶[̶0̶]̶ ̶:̶ ̶g̶e̶t̶P̶l̶a̶c̶e̶h̶o̶l̶d̶e̶r̶I̶m̶g̶(̶)̶ ̶}̶}̶"̶>̶
<img ng-src="{{::v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
For more information, see
AngularJS Developer Guide - One-Time Binding
AngularJS Error Reference - $rootScope:infdig
Infinite $digest Loop.
I'm new to AngularJS. I'm using carousel inside the tab and I used the angular-responsive for making the images responsive across the devices(http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview). I want to attach a class called 'active' to for the first tab by default if the tab name is 'All products'. To achieve this I have added the ng-class attribute as below:
<div id="category_list" ng-controller="MainContorller">
<div class="display-mode" dn-display-mode="displayMode"></div>
<div ng-controller="CategoryListController">
<uib-tabset active="activeTab">
<uib-tab index="$index" ng-repeat="prodCategory in productsByCategory" heading="{{prodCategory.slideName}}" ng-class="{'active': prodCategory.slideName == 'All products'}">
<div>
<div style="height: 305px">
<div uib-carousel active="activeCarousel" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slideCollection in prodCategory.slides" index="$index">
<div class="col-sm-3 col-lg-2">
<div class="product-box">
<div class="product-image"><img ng-src="{{slideCollection.image1.product.product_image.src}}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</uib-tab>
</uib-tabset>
</div>
</div>
AngularJS version : 1.3.4
This shows the following error:
Error: [$parse:syntax] Syntax Error: Token ',' is unexpected, expecting []] at column 92 of the expression [{'active': prodCategory.slideName == 'All products' } [{active: active, disabled: disabled}, classes]] starting at [, classes]].
OK according to this topic you are not able to use ng-class directly on uib-tabset but you can do this
<uib-tab-heading ng-class="{'tab-all-products': prodCategory.slideName == 'All products'}">
<span>{{prodCategory.slideName}}</span>
</uib-tab-heading>
and it will work fine :-) Here is Plnkr with working example.
You have some problem in your directive uib-tab. I tried to simulate your problem and when you replace that directive with a span it works so there is no problem with ng directives. If you can please post your directive here.
btw i created Plnkr
I am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.
This is my code which I am trying:
<div ng-repeat = "x in myWelcome.definition">
{{x.attributes[0].children[0].node_id}}
<hr>
</div>
I have tried this and it is working:
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
<div ng-if ="a.attributes">
a: {{a.attributes[0].rm_attribute_name}}
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index.
And my json file is here in the plunker:
Plunker link of json and code
So how can I iterate here using ng-repeat here this code:
{{myWelcome.definition.attributes[0]}}
is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.
ng-repeat can be used in the following way:
<div ng-repeat = "(key,value) in myWelcome.definition.attributes">
Key:{{key}} and value :{{value}}
<hr>
</div>
OR you can Try this:
<div ng-repeat = "x in myWelcome.definition.attributes">
<div ng-repeat="a in x.children">
a:{{a.node_id}}
</div>
</div>
Edited Plunker
I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
{{$index}}
<div ng-if ="a.attributes">
<div ng-repeat="b in a.attributes">
<hr>
{{b.children.length}}
<div ng-if="b.children.length > 1">
If the array is more than 1 please do the magic here
</div>
</div>
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.
I have a directive template with the following code
<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}"> </div>
<div class="clearfix"></div>
<div>Standard colors</div>
<div class="color_squares">
<div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
<div class="color_swatch" style="background-color: {{ color }};"></div>
</div>
</div>
<div class="clearfix"></div>
In the directive, I update the ngmodel using the below code to the color that was clicked - the div next to "chosen color" is updated with the selected color.
But, the expression "{{color.trim() == ngModel.trim()}}" always amounts to false.
{{color.trim() == ngModel.trim()}}
I have debugged the code and the values are exactly the same.
What I am missing?
This is probably because your variable is precisely named 'ngModel' see that article for more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/
To resume this article : never use raw fields use always a dot. So in your scope change
$scope.ngModel
By
$scope.data.ngModel
And in your html change ngModel by data.ngModel.
When using dot you may have some undefined error, this is because you have to initialize the object :
$scope.data={};
Of course you can jsut rename your variable, but you may still have a problem with others directives.
I solved this by removing curly braces around color and using ng-style
<div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" > </div>
The following code doesn't seem to work correctly:
<div ng-switch on="current">
<div ng-repeat="solution in solutions" ng-switch-when="{{solution.title}}">
{{solution.content}}
</div>
</div>
The output of {{solution.title}} is literally {{solution.title}}. It doesn't get processed by angular.
The ng-switch-when tag requires a constant, you can't put a variable in it.
You can rework your code as follows:
<div ng-repeat="solution in solutions">
<div ng-show="current == solution">
{{solution.content}}
</div>
</div>