I arranged the checkboxes and the text right next to each other using bootstrap grid. But, when I click on the textbox other than the first one, only the first checkbox gets enabled. How do I make the respective checkboxes get enabled without distorting the order?
Here is my stackblitz url
The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like
component-
public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2,
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4,
"place":"chennai-secundrabad"}];
html-
<div class="col-sm-1" style="margin-top: 10px;">
<mat-checkbox class="check-style" id="route.id"></mat-checkbox>
</div>
<div class="col-sm-10">
<div class="routesList">
{{route.place}}
</div>
</div>
I hope it helps.
Related
In my project I'm using a mat-dialog to display a description of an object. The objects are generated through ngFor, like this:
<mat-card id="CARDBOX" *ngFor="let box of box">
<img class="logoy" src="{{box.image}}" height=35px>
{{box.button_name}}
<input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
</mat-card>
It's a basic card object that has an info icon that when clicked, opens the dialog, which looks like this:
<title mat-dialog-title></title>
<div mat-dialog-content *ngFor="let box of box">
{{box.description}}
</div>
<div mat-dialog-action>
<button mat-button (click)="onNoClick()">Close</button>
</div>
This works. However, it is displaying EVERY description in box, rather than just the corresponding one. I know this is because of the ngFor running through every item. Is there a way so that it will only display the one correct description, perhaps through use of some kind of conditional? I would ideally like to keep everything as abstracted as possible, I figured using some kind of conditional in the HTML would make the most sense but I'm not sure if that exists? Please let me know if you need more detail.
<div mat-dialog-content *ngFor="let box of box">
{{box.description}}
</div>
Your ngFor directive is looping through with an element whose name (and thus its reference if I'm not making a mistake here) is equal to its container.
Have you tried this?
<div mat-dialog-content *ngFor="let boxEl of box">
{{boxEl.description}}
</div>
Your code might not be able to differentiate a "box" (element) from a "box" iterable.
I am trying to fix an accessibility defect in an Angular project at work. When a page loads and I start to tab through the page, the first element that is visible in the form is read twice. My code is something like below
<form [formGroup]="form" role="form" attr.aria-label="Edit Form" novalidate>
<div class="form-row">
<div class="col-md-9 col-sm-12 col-lg-9 paddingLR0">
<!-- Hidden code not rendered due to ngIf=false -->
<div role="region" attr.aria-label="Edit button region" *ngIf="viewMode">
<!-- Hidden elements not rendered due to ngIf=false -->
<button *ngIf="isEditable" [disabled]="!canEdit" type="submit" (click)="enableEdit()">
Edit
</button>
<div class="back-header">
<a tabindex=0 (keyup.enter)="back()" (click)="back()" (mouseover)="changeBackIconOnHover('back-region-top')" (mouseout)="changeBackIcon('back-region-top')" id="back-region-top">
<img src="{{pathImg}}/back_black.png"
<span class="margin-left10">Back</span>
</a>
</div>
</div>
</div>
</div>
<!-- More code here -->
</form>
If you see the code the first element that is visible is the Edit button, nested in a div with role as region, which is in turn inside a form with role form. When I tab through the page instead of just reading the button just once Edit button JAWS reads Edit Form form region. Edit Button on first tab, then reads Edit button region. Edit Button. There are no tabindexes on the parent elements. Removing the role attribute and the corresponding labels does not work. How do I only make jaws read the edit button once?
The above problem was occuring because of an empty div which had a tabindex=0.
So in the code snippet above I had a commented line
<!-- Hidden code not rendered due to ngIf=false -->
That referred to multiple divs which are warning, success and error messages related to the form in my actual code. Each of those divs have an ngIf for conditional rendering and a tabindex=0 to make it tab accessible. Except one of those divs simply had a tabindex but no ngIf. So it was always rendered. Like below.
<div tabindex=0>
<div ngIf="condition"> {{errormessage}}
</div>
</div>
If JAWS tabs onto an empty element it reads the previous labels. I removed the outer div which was remaining empty and the problem is solved.
I have a drop-down like so:
<div class="dropdown">
<select>
<option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
</select>
</div>
Basically, the dropdown element's name is inside an array and there are divs inside the html having the id as i.id like this:
<div class="right-bar">
<section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
<div class="description">{{i.deptname}}</div>
<div class="inner-block">
<div ng-repeat="j in i.cgs">
<img class="vertical-image" src="frame.png">
<img class="horizontal-image" src="mobileframe.png">
</div>
</div>
</section>
</div>
whenever I click the dropdown element, I want it to scroll to the particular section. But nothing happens when I do so. Why does this happen? And when I tried inspect element in chrome, it doesn't even show the tags in the ng-repeat dropdown.
You should use Angular's $anchorScroll.
Please, take a look at this similar question: How to handle anchor hash linking in AngularJS
Uhhm, my suggestion seems completely unrelated as I'm a dummy at AngularJS. But I have a solution to scrolling to a section using jQuery. You could simply give the section an ID and animate scrolling to that point on click by calculating the top offset and animating the scrolltop to that point...If you want me to show you the code, I'll gladly do so...:-) (Oh and I know this should be a comment because it doesn't directly answer the question, but my reputation's 13 so I can't comment)...
I am new to angularjs and I want create one Page in which I want to add 2 ui-grid with one button called "other-grid" first time it must Load 1st grid and when we click again then 1st grid must replace with 2nd grid But some Problems are there I want to use ng-show and ng-hide it works for first grid but not loading 2nd grid Properly Why So and Any Solution Please..
You are probably better off using ng-if when dealing with ui-grid.
As for ng-show, it does weird things when rendering ui-grids (refer to: https://github.com/angular-ui/ui-grid/issues/4559)
Here is plunker of 2 grids with a toogle button:
http://plnkr.co/edit/IGF6X7SqtFdFSk8jiory?p=preview
<button ng-click="toggleuigrid()">toggle grid</button>
<div class="row">
<div class="span4" ng-if="show">
<div id="grid1" ui-grid="gridOptions1" class="grid" ></div>
</div>
<div class="span4" ng-if="!show">
<div id="grid2" ui-grid="gridOptions2" class="grid" ></div>
</div>
</div>
Make sure you give the 'other' hidden grid proper height and width so that the framework knows the grid dimensions
You can try using ng-if, ng-show, ng-hide and make the other grid visible when you click on the button - 'other grid'
Here is the official UI grid tutorial which does something similar to what you want
I'm making a webpage that's using bootstrap-modal.js from Twitter bootstrap
bootstrap-modal.js allows you to create "modals." You basically click a button and a little javascript window slides down where you can display different content etc. Here's a demo http://jsfiddle.net/mjmitche/xt4aQ/44/
I'm going to have several buttons/modals on my webpage, so I have to set it up so each button triggers a different modal. I assume that the best way to do this is to give them different classes or ids
Problem, if I change the ids given by bootstrap-modal.js, it changes the properties of the modals...For example, it may remove or add a black screen backdrop etc. The fiddle linked to above shows how the code below works.
Question: Do you know how I could differentiate the modals so that each button triggers a different modal but allow them all to have the same properties?
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Primary
Secondary
</div>
</div>
Button
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn important">Launch left Modal</button>
You said you can't use id's so why not classes? try adding a different class to each modal. Here is your updated fiddle: http://jsfiddle.net/xt4aQ/52/
And I tried changing the id to number "2" and it works just fine. Just copy all the code and change the id by appending an ascending number.