So I have a list of notices in AngularJS which I create with ng-repeat. The notices have a visibility status which determines whether the notice is shown in the list. Every notice has controls which allow that notice to be hidden, a simple button that changes the notice.status.visibility to false.
I also have a checkbox input that is supposed to show hidden notices. However, I am unsure on how to implement this and how would it work.
Here's the HTML:
<ul>
<input type="checkbox" value="Show Hidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>
Maybe with something like this:
<ul>
<input type="checkbox" value="Show Hidden" ng-model="showHidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="showHidden || notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>
Related
(Backend developer trying to do some front end development here)
I have a simple HTML form with some text field inputs and a select menu. When the form is submitted I see the text field values hitting the web server but I don't see the value for the select menu hitting the server. The code for the select menu is:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
<i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
<div class="mdc-select__anchor role-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label id="roles-select-label" class="mdc-floating-label">Role</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface role">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="0">
Painter
</li>
<li class="mdc-list-item" data-value="1">
Electrician
</li>
<li class="mdc-list-item" data-value="2">
Decorator
</li>
</ul>
</div>
</div>
The select menu is a material design component as described here.
The Javascript I have associated to this component is:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});
A couple of questions I have straight off the bat:
Should I be using <li> instead of <option> - the code above follows the examples shown on the website.
Should there be a name attribute?
Create a hidden input:
<input type="hidden" name="my_select" id="my_select" value="">
Then store the value there:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
document.getElementById('my_select').value = role.value;
});
There is a new update to this in material documentation in additional information section. It suggests doing the same thing that the accepted answer says but with no JavaScript.
Just wanted to put this out there for new people referring to this.
Select with hidden input (for HTML forms)
For convenient submission of Select's value in HTML forms, a hidden input
element may be added under the root element. The component will synchronize
its value with that of the hidden input.
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor">
<!-- Rest of component omitted for brevity -->
</div>
</div>
I've got a few questions like 'what is something' and 4 radio buttons as answers. So it`s like 3 generated <ul>s in DOM. But the problem is, when I click some radio button, it selects the radio button in another question. How to fix this problem? Is it something with the value? Or it needs to have some unique index?
Code:
<ul *ngFor="let test of tests"> {{test.question.title}}
<li *ngFor="let answer of test.question.answers"> <input type="radio" [value]="answer" [(ngModel)]="radioSelected"> <label for="">{{answer}}</label> </li>
</ul>
<button (click)="check(radioSelected)">Send</button>
add name attribute base of index and create an answer object in the component
component
answers = {}; // 👈
template (view)
<ul *ngFor="let test of tests;let index = index"> {{test.question.title}}
<li *ngFor="let answer of test.question.answers">
<label >
<input [name]="index" type="radio" [value]="answer" [(ngModel)]="answers[index]">
{{answer}}</label>
</li>
</ul>
<button (click)="check(answers)">Send</button>
stackblitz demo 🚀🚀
You should have different ngModel for every test in ngFor, change your ngModel to
<input type="radio" [value]="answer" [(ngModel)]="test.question.radioSelected">
I am working my way through some AngularJS tutorials. Alongside, I have made my small toy to further experiment. I have found a situation where a expression works when outside a ng-repeat but wont work inside and I would like to understand why?
The template:
<div ng-controller="TodoController">
<ul ng-init="detail = 0">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span>{{todo.text}}</span>
<!-- This does not make the detaildiv appear -->
<input class="btn" type="submit" value="dive1" ng-click="detail = 1">
</li>
</ul>
<!-- This however will make the detaildiv appear -->
<input type="submit" value="divein" ng-click="detail = 1">
<p>Detail: {{detail}}</p>
<div id="detaildiv" ng-show="detail === 1">
<span>Some content</span>
<input type="submit" value="diveout" ng-click="detail = 0">
</div>
</div>
What is it about ng-repeat that stops this working, or am I on the wrong track?
putting my comment as an answer.
basically ng-repeat creates a child scope hence the detail inside and outside of ng-repeat is not same.
to fix this you have to use $parent.
<ul ng-init="detail = 0">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span>{{todo.text}}</span>
<!-- This does not make the detaildiv appear -->
<input class="btn" type="submit" value="dive1" ng-click="detail = 1">
</li>
</ul>
but the best way to fix this would be never use ng-model without dot.
or even better start using controller as syntax.
both above options would avoid such issues.
I have made a dropdown menu with multiple checkboxes using bootstrap (see http://jsfiddle.net/rxdazn/ryzJb/3/ ). This dropdown menu will introduce the possibility to plot multiple graphs ("measures") on the same chart + multiple options (log scale etc.).
A list of values (corresponding to "measures") will be stored in a json object.
For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options):
<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>
How can I best handle the fact that each measure type will have the same submenu?
Should I change my HTML? Should I dynamically generate values for <input> id attributes ?
<!-- graph type -->
<li class="dropdown-submenu"> Graph type
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="line" name="graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="dot" name="graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
Since an id must be unique on a page, you definitely should dynamically generate them; plus, you might also want to generate the name attribute in input element, but this is totally up to your use case. Based on you fiddle, I think you can generate your menu like this:
<ul id="menu">
<li class="dropdown-submenu" ng-repeat="facet in facets"> {{facet.name}}
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="{{facet.name}}-line" name="{{facet.name}}-graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="{{facet.name}}-dot" name="{{facet.name}}-graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
</li>
</ul>
I try to generate the id and name based on facet.name, you may want to change it to suit you needs.
I'm using JQuery UI to generate and load a tab when the user clicks a button using advice from this question that I asked earlier. It loads the data fine, but it is not applying the CSS styles that were present when the page was static.
function createTab2() {
// this will add a tab
$("#tabs").tabs("add","#tabs-2","1: Population Density");
$("#tabs-2").load('tabs/tab2.php');
$('#tabs').tabs('select', "#tabs-2");
}
My original static file contained the following:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
</ul>
<div id="tabs-1" style="height:300px;"> <!-- Start Tab 1 -->
<form >
<div id="radio-b1">
<input type="radio" id="b1" name="type" value="1" /><label for="b1">Radio Button 1</label>
</div>
</form>
</div> <!-- End Tab 1 -->
<div id="tabs-2" style="height:250px;"> <!-- Start Tab 2 -->
<form >
<div id="radio-p1">
<input type="radio" id="radio4" name="pop_den_1" value="1" /><label for="radio4">Radio Button 2</label>
</div>
</form>
</div> <!-- End Tab 2 -->
I replaced Tab 2 with a button that called the javascript function createTab2() and saved the following code in tab2.php:
<div >
<form >
<div id="radio-p1">
<input type="radio" id="radio4" name="pop_den_1" value="1" /><label for="radio4">Radio Button 2</label>
</div>
</form>
</div> <!-- End Tab 2 -->
I don't fully understand if I need to be adding properties to #tab-2 when I create it (such as setting an id value, or other properties.
The javascript function that you wrote wont automatically add styling to your elements. It will only use the styling that are there in the included jqueryui.css. I see you only have one style line in the tabs-2 in your static markup if this is the only style you want to apply to it you should just write a single js line to add this style.
This is the line that you have in your tab-2 style
style="height:250px;"
to apply this style you can do it the following way
$("#tabs-2").css("height", "250px");
do this before loading the tab or before calling the select on tabs-2