I have a search box with an icon which slides to the right if the input field is focused.
I use ng-focus and ng-blurto set the active state of the icon. If the input field contains a text, the icon should have the active state. How do you achieve this the angular way?
<div class="search">
<label for="search_users" style="background-image: url('assets/img/search_big.png')" ng-class="{ active: uFocus }"></label>
<input id="search_users" ng-model="user_query" ng-focus="uFocus=true" ng-blur="uFocus=false">
</div>
You can use expressions in ng-class for example
ng-class="{ 'active': (uFocus || user_query.length>0) }"
This will add the active class to your input in case of it is focus, or the user enter any input
You can see a working example of it:
angular.module('app',[])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.active{
background-color:blue
}
</style>
<div ng-app="app">
<label ng-class="{active:user_query.length>0 || isfocus}">The Label</label>
<input ng-model=user_query ng-focus="isfocus=true" ng-blur="isfocus=false">
{{user_query}}
</div>
Related
input component in ember as below:
{{#each tags as |tag index|~}}
<li class="emberTagInput-tag">
{{yield tag}}
{{#if _isRemoveButtonVisible}}
<a class="emberTagInput-remove" {{action 'removeTag' index}}></a>
{{/if}}
</li>
{{~/each~}}
<li class="emberTagInput-new">
{{masked-input
disabled=readOnly
class=(concat 'emberTagInput-input js-ember-tag-input-new' (if readOnly ' is-disabled'))
maxlength='20'
textMaxLength='20'
placeholder=placeholder
input-format='regex'
input-filter='[A-Za-z0-9\ \-##]{1,20}'
input-filter-message='Complaint Id is not valid.'
}}
</li>
And I am using it in my hbs files as below:
<div class="col-md-2">
<div class="form-group">
<label for="due-date" class=" control-label">Complaint Id</label>
{{#tag-input
maxlength=20
tags=tags
addTag=(action 'addNewTag')
removeTagAtIndex=(action 'removeTagAtIndex')
as |tag|
}}
{{tag}}
{{/tag-input}}
</div>
</div>
I want to set max length for the input that I enter as text in the textbox that comes with this component, the maxlength that I am setting to 20 is not working, so the input field is allowing unlimited number of characters, any help please which property sets the max length that one can enter in it? Thanks a lot please.
I have a list of the mat-slide-toggle. At a time only one slider will remain enabled and other slider will remain disabled.
Now while clicking on that enabled slider it's value will be changed and simultaneously other list of slider will be get enabled for selection and once the one slider will be get selected then other will be get disabled.
So, in short from the whole array only one mat-slide-toggle should be selected and other will be disabled simultaneously.
For that I have make the code as below.
<form [formGroup]="selectionForm">
<div class="row">
<div formArrayName="selectOption">
<div *ngFor="let select of selectionForm['controls'].selectOption['controls']; let i=index">
<div [formGroupName]="i">
<div formArrayName="selectionList">
<div *ngFor="let obj of select.controls['selectList'].controls; let j = index">
<div [formGroupName]="j">
<mat-slide-toggle formControlName="isSelected"" (change)="changeSelection($event)" disabled="slidValue || obj.isSelected === false"> Is selected? </mat-slide-toggle>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
In TS code:
public slidValue;
changeSelection(event) {
this.slidValue = false
}
Sample JSON Response
StackBlitz demo.
Eg: On load of the page:
Now when change the slide toggle all other options value not getting change from false to true for selection.
I added an option to the dropdown that allows user to add item if it doesn't exist.
For that matter, I added an input field to the dropdown but when the user enters something, the dropdown tries to match the entered text with items that are already in the list.
I find it quite annoying in that specific case. I have noticed in the docs that input elements are bound to the search function. Nevertheless, I couldn't find how to disable this behaviour.
Here's the HTML:
<div class="ui fluid selection dropdown playlist">
<input name="playlist" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">playlist</div>
<div class="menu">
<div class="item create" data-value="0">
<span class="create-placeholder">+ new playlist</span>
<div class="ui action input add-playlist">
<input placeholder="new playlist">
<button class="ui button">Add</button>
</div>
</div>
<div class="item" data-value="1">foo</div>
<div class="item" data-value="2">bar</div>
<div class="item" data-value="3">baz</div>
</div>
</div>
The .add-playlist div and its content are not shown but I'm willing to spare you with the CSS here.
And the js:
$dropdown = $('.ui.dropdown');
$dropdown.dropdown({
action: (text, val) => {
if (val == 0) { // eslint-disable-line
$('.create-placeholder').hide(100);
$('.add-playlist').css('display', 'inline-flex');
$('.add-playlist input, .add-playlist button').show(200);
}
else $dropdown.dropdown('set selected', val).dropdown('hide');
},
onHide: () => {
// do that after dropdown has been hidden
setTimeout(() => {
$('.add-playlist, .add-playlist input, .add-playlist button').hide();
$('.create-placeholder').show();
}, 400);
}
});
I've set up a fiddle to have a clear exemple. Just type "foo" and you'll see what I mean in case it's not crystal clear.
To allow user to add new items just add allowAdditions: True To dropdown options, for more informtions see semantic-ui dropdown settings
Example:
$('dropdownSelector').dropdown({
allowAdditions: True
}).dropdown();
I want to dynamically add field inputs to a form as the user completes it. However, if the user changes a value for a previous field that others depended on, then I want to hide those later fields again and reset their values back to the default. I can show and hide the input fields without a problem. However, no matter what I do, I cannot change the value of the selection dropdown menu.
Here is my script:
$(function() {
$('#type_selection').change(function() {
var case_type = $('#type_selection :selected').val();
if(case_type !== "") { //the default value is an empty string
$('.subtype-panel').slideDown('slow');
}
else {
$('.subtype-panel').slideUp('slow');
$('#subytype_selection').val("").change();
}
});
});
Play template:
#(caseForm: play.data.Form[Case])
#import views.html.common._
#import models._
#implicitFieldConstructor = #{
b3.vertical.fieldConstructor
}
#main("New Case Info") {
<div class="page-header">
<h3>New Case Information<span class="pull-right label label-primary">Open</span></h3>
</div>
<fieldset>
#b3.form(action = routes.CaseController.save()) {
<div class="panel panel-primary">
<div class="panel-heading">Case Type</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
#b3.select(caseForm("caseType"),
options = options(Case.typeOptions),
'_id -> "type_selection",
'_label -> "Case Type",
'_default -> "-- Select a Type --")
</div>
<div class="col-md-3">
#datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")
</div>
</div>
</div>
</div>
<div class="panel panel-primary subtype-panel">
<div class="panel-heading">Case Subtype</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
#b3.select(caseForm("caseSubType"),
options = options(Case.subTypeOptions),
'_id -> "subtype_selection",
'_label -> "Subtype",
'_default -> "-- Select a Subtype --")
</div>
</div>
</div>
</div>
}
</fieldset>
}
The b3 syntax may look a bit odd to you. It comes from a play bootstrap library: http://adrianhurt.github.io/play-bootstrap/
For b3 select fields, the default option is automatically assigned a value of an empty string. This is what I want to change my selection choice back to using JQuery.
The solution is as adis said in his comment. Using _id -> foo changes the id of the entire form-group (the label and the dropdown), but it does not change the id of the selection box specifically. You have to use id -> foo to do that.
I just worked through the Google Polymer tutorial and I am building my first own element. And I am missing some DOM-Scripting Functions I know from Prototype and jQuery that made my life very easy. But maybe my methods are just not right. This is what I have done so far:
<polymer-element name="search-field">
<template>
<div id="searchField">
<ul id="searchCategories">
<li><a id="search-categories-text" data-target="text" on-click="{{categoryClick}}">Text</a></li>
<li><a id="search-categories-videos" data-target="videos" on-click="{{categoryClick}}">Videos</a></li>
<li><a id="search-categories-audio" data-target="audio" on-click="{{categoryClick}}">Audio</a></li>
</ul>
<div id="searchContainer">
<input id="searchText" type="text" />
<input id="searchVideos" type="text" />
<input id="searchAudio" type="text" />
</div>
</div>
</template>
<script>
Polymer({
ready: function() {
},
categoryClick: function(event, detail, sender) {
console.log(sender.dataset.target);
console.log(this.$.searchField.querySelector('#searchContainer input'));
this.this.$.searchField.querySelector('#searchContainer input');
}
});
</script>
</polymer-element>
What I want to do is to set an active class to the bottom input-fields when one of the above links are clicked. On jQuery I would just observe a link and deactivate all input fields and activate the one input field I want to have. But I am not sure how to do it without jQuery. I could just use all the native javascript functions with loops etc but is there anything polymer can offer to make things easier?
Does this example do what you want?
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
<polymer-element name="search-field">
<template>
<style>
.hideMe {
display: none;
}
</style>
<div id="searchField">
<ul id="searchCategories">
<template repeat="{{category in searchCatergories}}">
<li><a on-click="{{categoryClick}}">{{category}}</a></li>
</template>
</ul>
<div id="searchContainer">
<template repeat="{{category in searchCatergories}}">
<div class="{{ { hideMe: category !== selectedCategory} | tokenList }}">
<label>Search for {{category}}</label>
<input id="search{{category}}" type="text">
</div>
</template>
</div>
</div>
</template>
<script>
Polymer({
searchCatergories: [
"Text",
"Video",
"Audio"
],
selectedCategory: 'Text',
categoryClick: function(event, detail, sender) {
// grab the "category" item from scope's model
var category = sender.templateInstance.model.category;
// update the selected category
this.selectedCategory = category;
// category
console.log("category", category);
// you can also access the list of registered element id's via this.$
// try Object.keys(this.$) to see registered element id's
// this will get the currently showing input ctrl
selectedInputCtrl = this.$["search" + category];
}
});
</script>
</polymer-element>
<search-field></search-field>
I've created an array for the categories and added two repeat templates.
I've setup a .hideMe class which is set on all input elements that aren't the currently selected category.
Info on dynamic classes - https://www.polymer-project.org/docs/polymer/expressions.html#tokenlist
Info on repeat - https://www.polymer-project.org/docs/polymer/binding-types.html#iterative-templates
Hope that helps