I'm new to Angular and need to repeat objects until the data is exhausted.
Here's the code snippet that I wish to repeat.
<!-- Start box content -->
<div class='span3 box box-nomargin' style="margin-left: 0px !important;">
<!-- Now starts the box content -->
<div class='box-header red-background'>
<div class="title text-center span12" style="font-weight: 600;">Skyfall</div>
<div class="normal text-center span12 utilMonSmallTitle">Network: <span class="utilMonSmallText">My First Network</span></div>
<div class="normal text-center span12 utilMonSmallTitle">Site: <span class="utilMonSmallText">My Site 388_ascdaaf298</span></div>
</div>
<div class='box-content text-center' style="padding-bottom: 0px;">
<!-- Start box content Header -->
<div class="title span4 text-left" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Hardware</div>
<div class="title span3 text-center" style="color: black; padding-left: 20px; font-size: 14px; font-weight: 600; margin-top: -10px;">
<i id="icon508Compliant" class="icon-remove-sign" style="font-size: 40px; color: red;"></i>
<!-- The icons are: icon-remove-circle, icon-warning-sign, icon-ok-circle -->
</div>
<div class="title span4 text-right" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Software</div><br><br>
<!-- End box content Header -->
<!-- Start box content body -->
<div class="row-fluid">
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="hwVal1">{{hardwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="hwVal2">{{hardwareAlerts[0].warning}}</span>
</span>
</div>
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="swVal1">{{softwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="swVal2">{{softwareAlerts[0].warning}}</span>
</span>
</div>
</div>
<!-- End box content Body -->
<!-- Start box content footer buttons -->
<div class="row-fluid">
<button class="btn btn-small btnBoxLeft"><i class="icon-warning-sign">View Critical</i></button>
<button class="btn btn-small btnBoxRight"><i class="icon-warning-sign">View All</i></button>
</div>
<!-- End box content footer buttons -->
</div>
<!-- Now ends the box content -->
</div>
<!-- End box content -->
So that whole snippet of code will REPEAT within a FLATTY Bootstrap "ROW" until there's no more data.
I'm used to Handlebars.js but Angular is a little tricky.
It needs to repeat based on the number of NETWORKS there are.
For instance: If there are 10 networks, the above code should repeat 10 times displaying 10 BOXES.
I have my controllers and directives code working... just need to understand the "REPEAT" stuff.
Thank you all.
You need to use ng-repeat
<div class='span3 box box-nomargin' style="margin-left: 0px !important;" ng-repeat="object in objects">
Where in the above snippet objects would be your ARRAY of objects. If you only have an object and you wish to iterate keys, use ng-repeat="(k, v) in objects". (Where k is your property name and v is the value of said property)
To display the data, simply reference the property within the repeater where you wish to use it via:
{{object.PROPERTY}}
Or, if using the (k, v) in objects simply do {{k}} or {{v}}
Related
i want to test a combobox (react-select) with cypress, i got this error, can anyone help me in that? or is there another way to choose an option from the react-select combobox and test it?
Timed out retrying after 4000ms: expected '<input#Land>' to have value 'Angola', but the value was ''
<div class=" css-1kszcc2-container">
<span id="react-select-2-live-region" class="css-1f43avz-a11yText-A11yText"></span>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class=" css-1oa51g-control">
<div class=" css-k02lgv-ValueContainer">
<div class=" css-1cgt3sd-placeholder">Land</div>
<div class=" css-aic2ap-singleValue">Angola</div>
<div class=" css-6j8wv5-Input" data-value="">
<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="Land" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 0; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
</div>
</div>
</div>
</div>
onSubmitFormData.submitFirstFormData('Angola')
submitFirstFormData(land){
cy.get("[id^=Land]").type(land+"{enter}{enter}").should('have.value',land);
}
Reselect the input for the assertion. If there's a slow(ish) event handler, the way you have .should() chained off .type() my not be retrying the .get().
cy.get("[id^=Land]").type(land+"{enter}{enter}")
cy.get("[id^=Land]").should('have.value',land)
I created a thumbnail with ng-repeat directive.When i click the add button,cards will be created automatically.What i want to do is to pass add button automatically right side after every thumbnail is added.In my code, there is an add button(it is fixed) and it creates thumbnails.Here is my code
`<div ng-show="list">
<div class="row-sm-3 row-md-3">
<div class="thumbnail"
style="width: 270px; height: auto; display: inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; border: 1px solid #5bc0de"
ng-repeat="location in list track by $index">
<div class="name"><strong>Name :</strong> {{location.name}}</div><br>
</div>
</div>
</div>
</div> `
`<div>
<button type="submit" class="btn btn-info btn-sm" style="width:180px; height:200px; margin-top:7px;
border-radius:10px; margin-bottom:20px; background-color:#ffffff;border-color:#46b8da"
ui-sref="context.location"><span style="font-size:18px; color:#337ab7">Add</span>
</button>
</div> `
Using ngDraggable/Angular Material and having problems dragging objects within the parent DIV container.
The DIV style has a defined height and an overflow-y of "scroll", and the data is a list of employees.
I was expecting the DIV tag to scroll as I dragged my object down the list, but the scrolling won't trigger.
Stuck for a solution. Any help would be appreciated. The following code snippet is a stripped down example of my code.
.allEmployeeContainer {
height: 500px;
overflow-y: scroll;
}
.employeeHolder{
display: inline-block;
width:100%;
font-weight: normal;
font-size: 10.5pt;
padding:10px 0px 10px 0px;
margin:0px;
}
<div class="allEmployeeContainer">
<div ng-repeat="employee in someCtrl.employees" style="padding:0px; margin:0px" >
<div class="employeeHolder" layout="row" layout-wrap>
<div style="width:100%; margin-top:10px;" layout="row" layout-wrap>
<div flex="15">
<div class="drag-object" ng-drag="true" ng-drag-data="clip"></div><br />
</div>
<div flex>{{employee.firstName}}</div>
<div flex>{{employee.lastName}}</div>
</div>
</div>
</div>
</div>
The following code gives me a checkbox with a label:
<md-checkbox ng-model="data.foo">
This Label should be editable
</md-checkbox>
Actual state: I can (un)check the box by clicking either the box itself or clicking on the label. The cursor is a pointer over the entire box-label-line.
Desired state: I can (un)check the box only by clicking on the box itself. When hovering the label, cursor should become a text cursor and clicking on it should offer in-place editing.
How can I achieve this?
Modify the html like this:
<div ng-app="sandbox" class="ng-scope">
<md-checkbox ng-model="data.label" aria-label="Editable label" role="checkbox" class="ng-valid md-default-theme ng-dirty ng-valid-parse ng-touched md-checked" tabindex="0" aria-checked="true" aria-invalid="false" style="">
<div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
<div class="md-icon"></div>
<div class="md-ripple-container"></div>
</div>
</md-checkbox>
<div ng-transclude="" class="md-label" style="display: inline-block;">
<span class="ng-scope">
This label should be editable
</span>
</div>
</div>
Modify the css class md-checkbox, note the display value and the width value.
md-checkbox {
box-sizing: border-box;
display: inline;
margin: 8px;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 18px;
padding-right: 0;
position: relative;
line-height: 26px;
min-width: 18px;
min-height: 18px;
width: 18px;
}
I am trying to make the datetimepicker responsive for bootstrap but having issues.
I have seen this plugin:
https://github.com/niftylettuce/bootstrap-datepicker-mobile#requirements
which would be great to use in my application, but the problem is my application doesn't use jQuery (nor do I want it to).
I have the datepicker set up like this:
<div class="col-md-4">
<div ng-model="controller.today" datepicker ng-change="controller.getArchive()"></div>
</div>
Does anyone know how I can make the datetimepicker responsive without using jQuery?
Well I managed to fix this myself.
I created my own templates which looked like this:
<script id="template/datepicker/datepicker.html" type="text/ng-template">
<div class="datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<daypicker ng-switch-when="day" tabindex="0"></daypicker>
<monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
<yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<div>
<div class="row">
<div class="col-xs-2">
<button class="btn btn-default btn-block" ng-click="move(-1)" tabindex="-1"><span class="fa fa-chevron-left"></span></button>
</div>
<div class="col-xs-8">
<button class="btn btn-default btn-block" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">{{ title }}</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default btn-block"><span class="fa fa-chevron-right"></span></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox">
<div ng-repeat="label in labels track by $index">
<small aria-label="{{ label.full }}">{{ label.abbr }}</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox" ng-repeat="row in rows track by $index">
<div ng-repeat="dt in row track by dt.date">
<button class="btn btn-default btn-block" ng-class="{'btn-info': dt.selected, active isactive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info' dt.current}">{{ dt.label }}</span></button>
</div>
</div>
</div>
</div>
</div>
</script>
Then I created 2 SASS files, one for the actual datepicker:
.datepicker {
text-align: center;
.row {
> div {
padding-left: 1px;
padding-right: 1px;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 15px;
}
}
> .col-xs-12,
> .col-sm-12,
> .col-md-12,
> .col-lg-12 {
padding-left: 15px;
padding-right: 15px;
}
}
.flexbox {
margin-top: -1px;
&:first-child {
margin-top: 2px;
}
}
}
and a flexbox one:
.flexbox {
display: flex;
> div {
-ms-flex: 1 auto;
flex: 1 auto;
margin-left: -1px;
&:first-child {
margin-left: 0;
}
}
}
This solved my issue.
I will update this when I have all templates replaced and I will add a jsfiddle.