I'm new to angular and trying to do the following:
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$index %2 == 0">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$index %2 != 0">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
for the above code, both ng-if is passing. Where I'm making mistake?
Try $even and $odd properties. Refer the documentation.
Like :
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
You don't need to use ng-if to check whether it's an even or odd element, that functionality is built-in already:
<tr ng-repeat="element in awesomeThings">
<span ng-class="$even ? 'odd' : 'even'">{{element}}</span>
</tr>
Another built-in feature is ng-class which gives you several options to conditionally set a css class, here I'm using the ternary version but there are other ways to use it also.
Here is a working example
Also, here is a good article explaining more about ng-class
You can also use ng-class-even and ng-class-odd.
https://docs.angularjs.org/api/ng/directive/ngClassEven
https://docs.angularjs.org/api/ng/directive/ngClassOdd
Try this in css:
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}
You could define style for the first item:
tr:first-child {
background: #84ace6
}
Related
I'am begining in Angular, and i'am asking if is it possible to make a "ng-show" true for one element in a "ng-repeat", and make it false for others?
I explain myself with this code:
html file :
<tbody ng-repeat="elem in List" ng-init="visible = false">
<tr ng-class="elemSelected(elem)">
<td colspan="3">
<a href ng-click="clickElemScroll(Elem)" >
<span class="glyphicon" ng-class="visible? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
<strong>{{elem.name}} </strong>
</a>
</td>
</tr>
<tr ng-show="visible" >
blabla
</tr>
</tbody>
js file :
$scope.clickElemScroll = function (elem) {
if ($scope.elemSelected === elem) {
$scope.visible = true
}
};
As you know, the issue is all the elem will be scrolled, how to make only the element which I click visible ?
You can set a new property onto the element to use in the ngRepeat. Also, not sure what is going on with ng-class but I don't recommend using a function in there. If you are trying to set a class when selected, try something like ng-class="{'selected': elem.selected}"
<tbody ng-repeat="elem in List">
<tr ng-class="elemSelected(elem)">
<td colspan="3">
<a href ng-click="elem.selected = !elem.selected">
<span class="glyphicon" ng-class="visible? 'glyphicon-chevron-down' : 'glyphicon-chevron-right'"></span>
<strong>{{elem.name}} </strong>
</a>
</td>
</tr>
<tr ng-show="elem.selected">
blabla
</tr>
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
how to divide rows to two tables with angularjs
<tr ng-repeat="field in node.fields track by $index" ui-tree-node="" class="ng-scope angular-ui-tree-node" collapsed="false" ng-if="$even">
I have tried this but it is not working for drag and drop
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
I am trying to create filters whose layout should match something like below screenshot.
So far I am able to achieve something like the given below screenshot.
Problem is I am unable to evenly distribute items in terms of space as shown in 1st screenshot. Also is it good way to create this kind of layout using table?
Please help me in understanding and creating this layout.
Below is my code
<div class="panel panel-default">
<div class="panel-heading" style="padding: 20px;">
<div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
<div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
</div>
<div class="panel-body">
<table width="100%">
<tr>
<td colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div ng-show="!loadinga">
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
<td align="left" colspan="1">
<div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
<input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
<label for="excludeMinutesStep">Exclude tasks running < </label>
<input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
</div>
</td>
<td align="left" colspan="1">
<div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
<input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
<label for="datalabels">Show Labels</label>
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4">
<a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
<a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
</td>
</tr>
</table>
</div>
</div>
css
.text-label {
color: #aab2bd;
font: 8pt;
}
.text-label-emphasize {
color: #575F64;
}
Bootstrap have tons of weeks dedicated to making all the "style elements" into classes, use them. As blunt as that is, read the documentation when stuck it truly can help you.
Apart from that lets get stuck into your issue.
If you really need to use table in your panel then, the best practice is to place it below or before .panel-body but since we want to maintain responsive mobile first technology for all our future projects, try to avoid it unless you actually want a table for data. Nested columns are the best practice to maintain this.
An example of how to nest any column is to use .row followed by the column size you wish to nest, example below.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
This would create good breakpoints and allow you to maintain a good UI/UX for your application.
Its important to understand bootstrap doesn't provide all the answers but it's a good style framework to expand from, so we make overriding css changes.
I added a few css overrides to make the borders square, and tried to
maintain your angular.js (you may need to review that)
Completed code with preview hosted on bootply
For the style checkboxes, take a look at Awesome Bootstrap Checkboxes, full documentation by them is available on their github.
Edit (Full width dropdown menu) --
To have the dropdown menu match the width of the button add the following css code to your overriding stylesheet.
.open>.dropdown-menu {
min-width: 100%;
}
Hope I helped ;)
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>