I'm using the following view:
<ion-item collection-repeat="scan in scans" href="#/app/scans/{{scan.local_id}}">
<h2 class="media-heading">ID: {{(scan.id ? scan.id : '--')}}</h2>
<div class="row">
<div class="col">
<div><b>Status</b></div>
<div><b>Photos</b></div>
</div>
<div class="col">
<div>{{getStatus(scan.status)}}</div>
<div><span ng-init="setNumberOfPhotos(scan)" ng-bind="numberOfPhotos[scan.local_id]"></span></div>
</div>
</div>
</ion-item>
Everything is working fine, the controller function setNumberOfPhotos(scan) called with undefined value, and I see the error in the console:
TypeError: Cannot read property 'local_id' of undefined
at Scope.setNumberOfPhotos (file:///android_asset/www/components/scans/scan.list.controller.js:83:35)
The error appears many time, so at every loop, but it seems that ng-init doesn't evaulated at every loop. Any idea?
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 have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
I want to show the elements that contain displayCategory.name with the ng-click above it, but it's not working as expected.
.divider-row
.row-border(ng-hide="showMe")
.row.row-format
.col-xs-12.top-label
Find where you stand
%hr.profile
.row.labelRow
.col-xs-12
%ul
%li(ng-repeat='category in service.categories')
.clear.btn.Category(ng-click='thisCategory(category) ; showMe = true') {{category.name}}
.divider-row
.row-border(ng-show="showMe")
.row.row-format
.col-sm-12.col-md-12.top-label.nopadLeft
What do you think about {{displayCategory.name}}
I dropped your haml into a converter and this is what it spat out (clearly incorrect):
<div class="divider-row">
<div class="row-border">(ng-hide="showMe")
<div class="row row-format">
<div class="col-xs-12 top-label">
Find where you stand
</div>
</div>
<hr class="profile"/>
<div class="row labelRow">
<div class="col-xs-12">
<ul>
<li>(ng-repeat='category in service.categories')
<div class="clear btn Category">(ng-click='thisCategory(category) ; showMe = true') {{category.name}}</div>
</li>
</ul>
</div>
</div>
</div>
<div class="divider-row"></div>
<div class="row-border">(ng-show="showMe")
<div class="row row-format">
<div class="col-sm-12 col-md-12 top-label nopadLeft">
What do you think about {{displayCategory.name}}
</div>
</div>
</div>
</div>
So after some quick googling I found that you should be writing it like this:
.divider-row
.row-border{"ng-hide" => "showMe"}
.row.row-format
.col-xs-12.top-label
Find where you stand...
As that will convert to what you need:
<div class="divider-row">
<div class="row-border" ng-hide="showMe">
<div class="row row-format">
<div class="col-xs-12 top-label">
Find where you stand
Using curly braces instead of round ones for attributes
I cannot run your code to verify, but I think the problem is that the binding property showMe should be replaced with some object like status.showMe.
For example, define $scope.status = { showMe: false}; outside the ng-repeat (in your controller maybe).
Please check a working demonstration: http://jsfiddle.net/jx854d3y/1/
Explanations:
ng-repeat creates a child scope for each item. The child scope prototypical inherits from the parent scope. In your case, the primitive showMe is assigned to the child scope. While you use it outside the ng-repeat, where it tries to get the value from the parent scope, which is undefined. That is why it is not working.
Basic rule is: always use Object, instead of primitive types, for binding.
For more details, please refer to: https://github.com/angular/angular.js/wiki/Understanding-Scopes
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>
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.