<tr ng-repeat="baseline in tower.baselines"></tr>
I have above HTML code where i have been using the ng-repeat to get to store the distorted array into an variable baseline....how can i access the same variable into controller?
<div ng-controller="SomeCtrl">
<p>{{baseline.doSomething($index)}}</p>
</div>
Use the ng-repeat variable ($index) in the html and call a function on the controller
<div ng-repeat="baseline in tower.baselines">
<div ng-controller="SomeCtrl">
<p>{{baseline.doSomething($index)}}</p>
</div>
</div>
Related
I'm having a bit of trouble working out why my images aren't rendering properly inside of an ng-repeat with an ng-init, ng-mousover and ng-mouseout.
<div ng-repeat="item in product.items">
<div ng-init="imgsrc='{{item.image01}}'"
ng-mouseover="imgsrc='{{item.image02}}'"
ng-mouseout="imgsrc='{{item.image01}}'">
<img ng-src="{{imgsrc}}" />
</div>
</div>
The correct paths are rendering inside of ng-init, ng-mouseover and ng-mouseout, but the <img> tag is only updating with {{item.image01}} and {{item.image02}} instead of the actual image paths.
What am I missing here?
remove the braces, for assigning values to variables you don't need them inside ng-init.
<div ng-repeat="item in product.items">
<div ng-init="imgsrc=item.image01"
ng-mouseover="imgsrc=item.image02"
ng-mouseout="imgsrc=item.image01">
<img ng-src="{{imgsrc}}" />
</div>
</div>
It's fine to assign a value with ng-init, but ng-moseouver and ng-mouseout don't work the same.
Try to create a function and pass it to them:
ng-mouseover="handleMouseover()"
ng-mouseout="handleMouseout()"
Then update the value of your variable inside of the methods accordingly.
I am having issues accessing variables (attached to $scope) inside ng-repeat loop. My ng-repeat is as follows:
<div class="row" ng-repeat="Message in Messages">
<p>{{ Message.Sender ChattingWith}}</p>
</div>
I can use ChattingWith variable outside the ng-repeat but can't use it inside for some reason. I have used $parent.ChattingWith without any luck. Any help would be appreciated.
Write code like this:
<div class="row" ng-repeat="Message in Messages">
<p>{{ Message.Sender + ChattingWith}}</p>
</div>
This will solve the problem.
I want to create a directive which includes a ng-repeat and I need to bind an event to a contained tag inside the ng-repeat like the "test-class"
<div>
<div ng-repeat="row in ctrl.items">
<div>
<p ng-bind="row.Text"></p>
<a class="test-class"></a>
</div>
</div>
</div>
but my problem seems to be that in the link function the "element" property seems to contain only the ng-repeat and so I can't find the "test-class" within the element because its not there in the link function, that makes sense.
But how can I then access the dom and bind some custom events to the "a" in my example.
The only solution I had is to create two directives one with the ng-repeat and the other with the content inside the ng-repeat. Do I miss something or is this the only possible solution for my problem?
Directive with name "DirectiveContent":
<div>
<p ng-bind="row.Text"></p>
<a class="test-class"></a>
</div>
Then the new complete Directive:
<div>
<div ng-repeat="row in ctrl.items">
<directive-content></directive-content>
</div>
</div>
I'm using one controller for a view that looks like this
<div>
<div ng-repeat="blah in blah1">
</div>
<div ng-repeat="blah in blah2">
</div>
</div>
The issue is that the second time ng-repeat is used, it seems to duplicate what was seen in the first repeat. I have confirmed that blah1 is in fact different from blah2. I'm not sure as to why the second ng-repeat goes through items in blah1.
Any clues?
Thanks!
maybe the ng-repeat for blah2 is included inside the ng-repeat of blah1, so it repeats blah1 content everytime blah2 is iterated.
otherwise should work fine
<div ng-app='bla'>
<div ng-controller='ctrl'>
<div ng-repeat="blah in blah1">
<span>{{blah}}</span>
</div>
<hr/>
<div ng-repeat="blah in blah2">
<span>{{blah}}</span>
</div>
</div>
</div>
<script>
angular.module('bla', [])
.controller('ctrl', ctrl);
function ctrl($scope){
$scope.blah1 = [1,2,3,4,5,6,7,8,9];
$scope.blah2 = [21,22,23,24,25,26,27,28,29]
}
</script>
https://jsfiddle.net/hsdcpk2x/1/
ng-repeat goes just over all the items in blah1 and blah2. If the second ng-repeat duplicates blah1 then they are in fact the same. You should post more code so we can get to the actual issue.
use ng-repeat-start and ng-repeat-end
hope it would solve your issue
I am using multiple named ui-views in a single controller. Everything is working as spected when name the ui-view in the html file with this code:
<div class="box">
<div ui-view="selector"></div>
<div ui-view="widget1"></div>
<div ui-view="widget2"></div>
<div ui-view="widget3"></div>
<div ui-view="widget4"></div>
</div>
But when I want to load dynamically some of those views with a ng-repeat it does not update the information.
<div class="widgets">
<div class="widget-container" ng-repeat="widget in widgets">
<div ui-view="{{widget}}"></div>
</div>
</div>
How could I load ui-views from my ng-repeat?
This hadn't been answered so i decided to go ahead and show how to do it. Unfortunately for some reason the attempt in the question didn't work but what you can do is link to a function between curly brackets and return the string of the view you want. For instance the controller would look like this:
$scope.groups = ['main','cases', 'models'];
$scope.pickView = function(index){
return $scope.groups[index];
};