This is my html code :
<h3 ng-repeat="goal in goals" ng-controller="AddGoalsCtrl">
<h4 ng-repeat="(key,value) in goal" ng-controller="AddGoalsCtrl">
{{key}} : {{value}}
</h4>
</h3>
and this is what my service layer returns :
[Goal [goalId=1, goalName=goal1, goalDescription=goaldescript, measurementCriteria=crtr, visible=Y], Goal [goalId=2, goalName=goal1, goalDescription=goal 1 description, measurementCriteria=criteria1, visible=Y], Goal [goalId=3, goalName=goal1, goalDescription=goal 1 description, measurementCriteria=criteria1, visible=Y]]
or json as :
[{"goalId":1,"goalName":"goal1","goalDescription":"goaldescript","measurementCriteria":"crtr","visible":"Y"},{"goalId":2,"goalName":"goal1","goalDescription":"goal 1 description","measurementCriteria":"criteria1","visible":"Y"},{"goalId":3,"goalName":"goal1","goalDescription":"goal 1 description","measurementCriteria":"criteria1","visible":"Y"}]
but my html is not printing anything like key:value .......
you are loading controller many times in a partial.it should not be like that.html code should like this:
<div ng-controller="AddGoalsCtrl">
<h3 ng-repeat="goal in goals" >
<h4 ng-repeat="(key,value) in goal">
{{key}} : {{value}}
</h4>
</h3>
</div>
I created a plunker for you at http://plnkr.co/twdDzpxikJMTe0WuN7ro.
You shouldn't be nesting the controller try something like the following instead:
<body ng-controller="AddGoalsCtrl">
<div ng-repeat="goal in goals">
<h4 ng-repeat="(key,value) in goal">
{{key}} : {{value}}
</h4>
</div>
</body>
Also, don't nest an h tag within another it's not symantically correct HTML. I used a div instead for the outer repeat since you weren't doing anything with it in this example.
Related
Is there any way where I can assign the hash(#) automatically to the elements inside an ngfor?
<div *ngFor="let note of notes; index as i">
<h3 #[note][i]>
{{ note }}
</h3>
</div>
The result I would expect would be something like this:
<div>
<h3 #note11>
note1
</h3>
</div>
<div>
<h3 #note122>
note12
</h3>
</div>
<div>
<h3 #note153>
note15
</h3>
</div>
You can use the index variable to automatically assign a unique id to each element in the ngFor loop. Here's an example:
<div *ngFor="let note of notes; index as i">
<h3 id="note{{i}}">
{{ note }}
</h3>
</div>
This will give each element an id of "note0", "note1", "note2", etc.
Regarding using #, it is not possible to use it in such a way. The # symbol is used to create a template reference variable, you can use it like <h3 #myNote>{{ note }} and you can access the element using myNote in your component.
Try this:
<div *ngFor="let note of notes; index as i">
<h3 #{{note}}{{i}}>
{{ note }}
</h3>
</div>
Note:
This would do your work but # is used to create template reference.
Is it possible to replace ngx-pagination's 'pagination-control'? By defaults, page numbers are showing like '1 2 3'. And I want to replace them with a string value in the array.
<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>
The above code will display pagination numbers like
I want to replace the number with values from an array [Anything1, Anything2, Anything3].
Here my data is fixed and I know my page number count and its details.
You need to have look at custom template of ngx-pagination. In customization part you may try to add your Anything before {{page.label}}.
Custom Template example can be found here. http://michaelbromley.github.io/ngx-pagination/#/custom-template
<pagination-template #p="paginationApi"
[id]="config.id"
(pageChange)="config.currentPage = $event">
<div class="custom-pagination">
<div class="pagination-previous" [class.disabled]="p.isFirstPage()">
<a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
</div>
<div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
<a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>Anything{{ page.label }}</span>
</a>
<div *ngIf="p.getCurrent() === page.value">
<span>Anything{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="p.isLastPage()">
<a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
</div>
</div>
</pagination-template>
I have an array called altSegments, and based on $scope.firstSeg or $scope.lastSeg I'd like to display different parts of that same array. In most cases I change the altSegments array alltogether and it updates fine, but when I go from the same altSegments array to the same array but change the $scope.firstSeg and $scope.lastSeg it doesn't update properly.
I suspect it has something to do with altSegments not having changed and therefore AngularJS deciding that it's not worth it to go over the code again and re-display. How would I get around this?
<li ng-repeat="altseg in altSegments">
<!-- For multiflight home to first -->
<div ng-show="{{firstSeg}}" ng-repeat="flights in altseg.segment_details_1.leg_details">
<p class="small dark">
<strong>Flight:</strong> {{flights.Carrier}} {{ flights.FlightNumber}}
</p>
<p class="small dark">
<strong>Departure:</strong> {{flights.OriginName}} | {{flights.DepartureTime | splitDT }}
</p>
<p class="small dark">
<strong>Arrival:</strong> {{flights.DestinationName}} | {{flights.ArrivalTime | splitDT }}
</p>
</div>
<!-- For multiflight last to home -->
<div ng-show="{{lastSeg}}" ng-repeat="flights in altseg.segment_details_2.leg_details">
<p class="small dark">
<strong>Flight:</strong> {{flights.Carrier}} {{ flights.FlightNumber}}
</p>
<p class="small dark">
<strong>Departure:</strong> {{flights.OriginName}} | {{flights.DepartureTime | splitDT }}
</p>
<p class="small dark">
<strong>Arrival:</strong> {{flights.DestinationName}} | {{flights.ArrivalTime | splitDT }}
</p>
</div>
ng-show is an angular directive and evaluates angular code;
Therefore; you do not need : ng-show="{{firstSeg}}"
Remplace with : ng-show="firstSeg"
See full documentation of ng-show here: https://docs.angularjs.org/api/ng/directive/ngShow
it looks like you are using ng-show="{{firstSeg}}" this should be ng-show="firstSeg" ..
If still doesn't work,
Try to update the data from controller side in $scope.apply() ...
e.g :-
$scope.apply(function(){
list = updated_list; // put your updation of list here
});
I'm trying to create a means to toggle dynamically created rows of information. I've tried using ng-init, and then passing it to a function, but I'm screwing up somewhere and I can't seem to wrap my head around how or if this is possible. The gap, I believe, is in getting the concatenated scope variable to be referenced elsewhere. I'm using Bootstrap 3 and AngularJS 1.5.
The HTML:
<div class="row" data-ng-repeat="equipment in task.equipment">
<div class="col-md-12">
<h4 class="green-text">
{{ equipment.equipId }}
<small class="green-text">
<i class="glyphicon"
data-ng-class="{'glyphicon-triangle-bottom': field{{ $index }}, 'glyphicon-triangle-right': !field{{ $index }}}"
data-ng-init="equipment['field' + $index] = true"
data-ng-click="toggleTaskEquip('field{{ $index }}')">
field{{ $index }}: I WANT THIS TO WORK</i>
</small>
</h4>
</div>
<div data-ng-show="field{{ $index }}">
...stuff here...
</div>
</div>
The JS:
$scope.toggleTaskEquip = function(toggleBool)
{
if (toggleBool === true)
$scope.isTaskEquipOpen = false;
else if (toggleBool === false)
$scope.isTaskEquipOpen = true;
};
If I understand the problem correctly, you want to be able to toggle the boolean created in the ng-init with a click.
I think you need this:
<div class="container-fluid">
<div ng-controller="MyCtrl">
<div class="row" data-ng-repeat="equipment in task.equipment">
<div class="col-md-12">
<h4 class="green-text">
{{equipment.equipId}}
<small class="green-text">
<i class="glyphicon"
data-ng-class="{'glyphicon-triangle-bottom': isVisible, 'glyphicon-triangle-right': !isVisible}"
data-ng-init="isVisible = true"
data-ng-click="isVisible = !isVisible">I WANT THIS TO WORK</i>
</small>
</h4>
</div>
<div data-ng-show="isVisible">
...stuff here...
</div>
</div>
</div>
</div>
You don't even need the function toggleTaskEquip on the $scope.
JSFiddle here.
ng-repeat creates a new scope for each template instance, so you can just create a separate isVisible for each equipment with isVisible = true in the ng-init.
I'm using Protractor to test an angular page. This page has a table populated by ng-repeat and I would like to extra the text within that table. Here is the HTML code:
<div class="data-group ng-scope" ng-repeat="group in tableData | filter: filterText | orderBy: getValueToOrderByGroup() : sortingCriteria.descending" ng-show="filtered.length > 0">
<div class="data-row group-header">
<div class="col-md-6">
<i ng-click="group.hideRows = !group.hideRows" ng-class="{'rotate-down': group.hideRows}" class="fa fa-fw fa-chevron-right"></i>
<strong class="text-capitalize ng-binding" ng-click="group.hideRows = !group.hideRows"> HEADER TEXT </strong>
</div>
</div>
<div collapse="group.hideRows" class="collapse in" style="height: auto;">
<div class="data-row child-row ng-scope" ng-repeat="thing in filtered = (group.data | filter: filterStuff | filter: filterText | orderBy: getValueToOrderByChild() : sortingCriteria.descending)">
<div class="col-md-3 cell-data child-row-indent text-capitalize">
<span class="clickable-element ng-binding">CHILD ONE</span> <br>
</div>
<div class="col-md-2 child-row-indent-responsive">
<span class="visible-xs visible-sm">Status: </span><span class="ng-binding"> CHILD TWO </span>
</div>
</div>
</div>
And these are my statements to extract the text:
var headerText = element.all(by.repeater('group in tableData')).get(0).all(by.tagName('div')).get(0).element(by.css('div > strong')).getText();
var childOne = element.all(by.repeater('group in tableData')).get(0).all(by.tagName('div')).get(1).element(by.css('div > div:nth-child(1) > span').getText();
When I ran this, it returned a whole block of all the functions but not the actual text. Any help would be appreciated.
It is important to understand that WebdriverJS and protractor itself are entirely based on the concept of promises due to their asynchronous nature. See Promises and the Control Flow.
In other words, getText() in your case returns a promise. If you want to see the actual value, you need to resolve it:
headerText.then(function (text) {
console.log(text);
});
Note that you don't need to resolve promises inside an expect() - it knows how to resolve promises before making an expectation (thanks to jasminewd).