I have a simple ng-repeat, that displays a list of statuses. I wanted to extend this ng-repeat to ng-switch to display a value depending on the status.
Current ng-repeat:
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
{{ myStatus }}
</td>
With ng-switch:
<td ng-repeat="myStatus in history.Status.slice(0, 12)" ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</td>
However, witht eh above ng-switch, nothing is displayed.
Works at my end, here is the Plunker
However as a suggestion i would prefer to use a function expression instead of ng-switch.
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
<span>{{getStatus(myStatus)}}</span>
</td>
getStatus is a function which would return the required information.
Use This
<td ng-repeat="myStatus in history.Status.slice(0, 12)" >
<span ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</span>
</td>
Related
How use css selector find the last element in same elements each line on python? I'm using package pyquery.
I has tried tr td:nth-child(2) .score.fill:last-child, tr td:nth-child(2) .score.fill:nth-last-child(1). all failed.
<table>
<tbody>
<tr>
<td>Vote A</td>
<td>
<span class="score fill">1</span>
<span class="score">2</span>
<span class="score">3</span>
<span class="score">4</span>
<span class="score">5</span>
</td>
</tr>
<tr>
<td>Vote B</td>
<td>
<span class="score fill">1</span>
<span class="score fill">2</span>
<span class="score fill">3</span>
<span class="score fill">4</span>
<span class="score fill">5</span>
</td>
</tr>
<tr>
<td>Vote C</td>
<td>
<span class="score fill">1</span>
<span class="score fill">2</span>
<span class="score fill">3</span>
<span class="score">4</span>
<span class="score">5</span>
</td>
</tr>
</tbody>
</table>
I want get result like this:
<span class="score fill">1</span>
<span class="score fill">5</span>
<span class="score fill">3</span>
this won't work, because of .score.fill:last-child this selector means element with classes score and fill AND also last child.
You can select this with only CSS, you have to located this by JS and for examle add one more class for them.
This is feature which will be in new css :nth selectors here is link
Here is something can help
I am trying to set td value based on condition, here is my code
<td>
<span ng-init="tdValue=true;"></span>
<span ng-repeat="value in data_report" ng-if="fellow.F_Id==value.fellowship_id">
<span ng-init="tdValue=false;">{{value.Completed}}</span>
</span>
<span ng-if="tdValue">0</span>
</td>
In the following code I am checking
1. If the condition matches set the value to value.completed
2. If not keep default value as zero
But the result i am getting is
14 0
14 is value.completes and 0 is default value (Both the values are getting printed)
You must target the nested <span>, not the repeater <span> itself :
<td>
<span ng-init="tdValue=true"></span>
<span ng-repeat="value in data_report">
<span ng-if="fellow.F_Id==value.fellowship_id" ng-init="$parent.$parent.tdValue=false">{{value.Completed}}</span>
</span>
<span ng-if="tdValue==true">0</span>
</td>
Also
both ng-repeat and ng-if creates nested child scopes, thus $parent.$parent is needed to address the outer tdValue
ng-if must consist of expressions, i.e ng-if="tdValue == true"
You Can use ternary operator
<td>
<span ng-init="tdValue=true;"></span>
<span ng-repeat="value in data_report" ng-if="fellow.F_Id==value.fellowship_id">
<span>{{tdValue==true?value.Completed:0}}</span>
</span>
</td>
Can you instead remove this ng-init="tdValue=true;" and declare it inside your controller.
$scope.tdValue=true;
Try this
<td>
<span >{{selectedId}}</span>
</td>
This is controller code you can try out.
$scope.selectedId=0;
for(var i=0;i<$scope.data_report.length;i++){
if($scope.fellow.F_Id==$scope.data_report[i].fellowship_id){
$scope.selectedId=$scope.data_report[i].fellowship_id;
break;
}
}
Then you have to apply if condition on span tag in which you are using ng-repeat.
<td>
<span ng-init="tdValue=true"></span>
<span ng-repeat="value in data_report" ng-if="fellow.F_Id==value.fellowship_id">
<span ng-init="$parent.$parent.tdValue=false">{{value.Completed}}</span>
</span>
<span ng-if="tdValue==true">0</span>
</td>
I am trying to use ng-switch to display different hyperlink such as Modify/Approve/Reject But the hyper link is not showing up on screen , when i use it to display text it is working . what am i missing . This is my HTML
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch={{val.action}} align="left" class="validationMsg">
<span ng-switch-when="View"><a href style="cursor: pointer" data-toggle="modal" data-target="#editWindow" ng-click="ModifyConfig(details)">Modify</a></span>
<span ng-switch-when=Approve><a href style="cursor: pointer" data-toggle="modal"data-target="#editWindow" ng-click="RejectConfig(details)">Reject</a></span>
<!-- and so on.. -->
</td>
ng-switch-when needs expression to compare, so wrap value with '(single quote) would do the trick. Addionally remove {{}}(interpolation directive) from ng-switch directive as it needs only expression.
Markup
<tr ng-repeat='item in errorsd'>
<td ng-switch="val.action" align="left" class="validationMsg">
<span ng-switch-when="'View'">
<a href style="cursor: pointer" data-toggle="modal" data-target="#editWindow" ng-click="ModifyConfig(details)">Modify</a>
</span>
<span ng-switch-when="'Approve'">
<a href style="cursor: pointer" data-toggle="modal"data-target="#editWindow" ng-click="RejectConfig(details)">Reject</a>
</span>
</td>
</tr>
first your ng-repeat creates the variable "item",
that should be used in your ng-switch ("val" is not known)
<td ng-switch="item.action">
then you missed the quotes here:
<span ng-switch-when=Approve>
Working example here
I am trying to implement sorting for my AngularJS application using Predicate function. This is my code
<td>
<a href="" ng-click="predicate = 'date'; reverse=!reverse">
Time
<span ng-show="predicate == 'date'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
<td ng-if="SId==2">
<a href="" ng-click="predicate = 'name'; reverse=!reverse">
Name
<span ng-show="predicate == 'name'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
<td ng-if="SId==2">
<a href="" ng-click="predicate = 'rno'; reverse=!reverse">
RNO
<span ng-show="predicate == 'rno'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
<td ng-if="SId==1">
<a href="" ng-click="predicate = 'phoneNumber'; reverse=!reverse">
Phone Number
<span ng-show="predicate == 'phoneNumber'">
<span ng-show="!reverse">
<img src="img/ascending.gif">
</span>
<span ng-show="reverse">
<img src="img/descending.gif">
</span>
</span>
</a>
</td>
I have two dashboards, which are using the same HTML page. But Column names are different. So, column names are displayed based ng-if condition (SId = 1 is first dashboard & SId = 2 is second dashboard). Now columns are shown correctly in both dashboards. But when I implement sorting upon column names, the column which is having ng-if condition is not sorting.
ng-if has its own scope. So when you do predicate = 'rno' inside an ng-if, you're creating a predicate attribute in the ng-if scope instead of modifying the controller scope's predicate.
Use a function to set the predicate:
$scope.sortBy = function(property) {
$scope.predicate = property;
$scope.reverse = !$scope.reverse;
}
and
<td ng-if="SId==2"><a href="" ng-click="sortBy('name')">
I'm trying to understand how I can work with multiple ng-repeat-end's.
I have a table that shows 20 years worth of data, split into 5 year chunks.
Each row on the table displays 5 years worth of data. This is how I am displaying the first 1-5 years.
<table>
<tbody>
<tr ng-repeat="history in HistoryCategory.Category[key]">
<th>{{ history.CompanyName }} 1-5 years</th>
<td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
</tbody>
</table>
<div ng-repeat-end class="scroll-btns">
<div class="scroll-btns">
<div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
<div class="scroll-right icon-right" ng-click="scrollRight()"></div>
</div>
</div>
At the bottom of the table is a DIV with class scroll-btns.. All this does is allow the above table to be scrollable and shows some icons to move left/right.
What I am trying to do now, is show year 6-10, 11-15 & 16-20 (in the same table). I have tried:
<table>
<tbody>
<tr ng-repeat-start="history in HistoryCategory.Category[key]">
<th>{{ history.CompanyName }} 1-5 years</th>
<td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
<td ng-repeat="emptyCell in getEmptyCells(history.Histories.slice(0, 5).length)"></td>
</tr>
<tr ng-repeat-end>
<th>6 - 10 years</th>
<td ng-repeat="mycredits in history.Histories.slice(5, 10)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
<tr ng-repeat-end>
<th>11 - 15 years</th>
<td ng-repeat="mycredits in history.Histories.slice(10, 15)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
</tbody>
</table>
<div ng-repeat-end class="scroll-btns">
<div class="scroll-btns">
<div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
<div class="scroll-right icon-right" ng-click="scrollRight()"></div>
</div>
</div>
With the above I am seeing a ng-repeat-start/end error and the text 6-10years and 11-15years are not displaying.
However, if I only have the one ng-repeat-end (for example for 6-10years) and not the second, the application displays as expected.
**** RESOLVED ****
Resolved by having 2 tags... One with ng-repeat-start, and the other with ng-repeat-end. The tag with ng-repeat-end contains all rows that are 5+ years.
This
<tr ng-repeat-start="item in items"></tr>
<tr></tr>
<tr></tr>
<tr ng-repeat-end></tr>
will give you four tr's for each item.