Overriding text input value with ng-model - javascript

I have a input "firstname" where I type letters and it gives all the letter matches via filter. Then when I select wanted match which is a button, it should be changing the value inside input as selected.
This works IF input field is empty, but when lets say, i'm searching all the ppl named "jake" and I type "j"-letter inside input; then I choose jake from the list.
Input still shows only the "j"-letter.
One input field where search happen. Input value should be overridden when new value is selected from the list. How to do this?
html:
<input type="text" id="firstName" class="form-control" ng-model="firstName" required />
<div>
<ul ng-repeat="event in events | letterSearch:firstName | unique: 'email'">
<li>
<button class="btn btn-sm" ng-click="fillForm(event.firstName)">{{event.firstName}} </button>
</li>
</ul>
</div>
js:
$scope.fillForm = function (firstN) {
$scope.firstName = firstN;
};
Thx beforehand =)

Related

Bind input to only one text input in angular

There is a scenario where I use ngfor and adding the text box for each iteration. When I type anything in the text box it binds to every text box but I want to give input to that text box only which I click to enter a value.
<div class="comment" *ngFor="let comment of blog.comments">
<p>posts...</p>
<input type="text" [(ngModel)]="newComment.content" [ngModelOptions]="{standalone: true}">
</div>
You are referring same ngModel to every text box.
You need to have a array of newComment Objects.
<div class="comment" *ngFor="let comment of blog.comments;let i = index">
<p>posts...</p>
<input type="text" [(ngModel)]="newComment[i].content" [ngModelOptions]="{standalone: true}">
</div>
This should be like this: event -> target-> value will give you current input value
Html:
<input (keyup)="onKey($event)">
Component TS
onKey(event: any) {
console.log(event.target.value)
}

Jquery insert span into input field

I'm building a simple tagging system for an text input field, here's what it looks like.
At the moment, the next tag is being added before the input field, but I'd like it to appear within the input field, so that if the users hits backsapce, it will delete the tag. If that makes sense. I'm not sure how to get the span to appear inside of the input field, here's the code:
<div id="formWrapper" class="ui-widget">
<form id="searchForm" action="#">
<fieldset>
<legend>Test search form</legend>
<span>Search</span>
<div id="searchBoxDiv" class="ui-helper-clearfix">
<button type="button" id="savedSearchButton">Test</button>
<input id="searchBox" type="text" autocomplete="false">
</div>
</fieldset>
</form>
</div>
function addSearchTerm(e, ui) {
var searchTerm = ui.item.value;
var span = $("<span>").text(searchTerm);
var a = $("<a>").addClass("remove").addClass("testclass").attr({
href: "javascript:",
title: "Remove " + searchTerm
}).text("x").appendTo(span);
span.insertBefore("#searchBox");
}
I've tried various combinations of insert, append but I don't seem to be able to get anything inside of the input, except text. I'm guessing I'll have to do something where the input field is within another , but I'm really not sure how.
Thanks

Angular Js: How can i fire ng-blur on input field as soon as is displayed?

THE SITUATION:
Hello guys. In my app i have a button to create a new folder.
When that button is clicked there appears an input field where to enter the name and create the folder.
On the input field there is an ng-blur that creates the folder if the input is not empty, otherwise hide the input field.
The ng-blur is activated once i click inside the input field at least one time. Otherwise is not fired.
What I would like to obtain is this:
Once the button 'Add a new folder' is clicked and the input field appears, it will disappear as soon as i click somewhere else (without having to click inside the input one time).
To have a reference, i mean exactly how it works inside Outlook to create a new email folder.
THE QUESTION:
Is it possible to set the cursor inside the input field, once it appears? In this way the ng-blur will probably be fired and i will obtain what i need.
Alternatively it is possible to apply the same functionality of ng-blur to a button?
THE CODE:
<li> <i class="fa fa-plus"></i> Add folder </li>
<li ng-if="folder_box_view == 'display_folder_box'">
<div class="input-group">
<input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
</span>
</div>
</li>
Thank you
The best solution was actually to set the focus on the input field as soon as it appears. In this way by clicking outside the ng-blur is fired as i wanted.
This is how i set the focus:
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '=focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === true)
{
element[0].focus();
scope.trigger = false;
}
});
}
};
});
<li> <i class="fa fa-plus"></i> Add folder </li>
<li ng-if="folder_box_view == 'display_folder_box'">
<div class="input-group">
<input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )" focus-me="focusInput">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
</span>
</div>
</li>
The solution was found in this StackOverflow answer:
How to set focus on input field?

Angularjs: Add placeholder on input with active class

I have a list of inputs created via ng-repeat. Initially all inputs are disabled except the first one. First input also have an active class (it's red in color because of active class) Planker
When I focus on the first input field 2nd input field becomes enabled with same active class. Same for others
So what I am trying to do is, if inputs have active class there will be a "placeholder text" on it. Without active class there should be no placeholder.
How I can add a placeholder dynamically on the input with active class ?
Code:
<div class="col-md-2-4 voffset3" ng-repeat="item in csTagGrp">
<ul class="list-unstyled cs-tag-item-grp" ng-init="$parentIndex = $index">
<li class="clearfix" ng-repeat="value in item.csTags">
<div class="pull-left cs-tag-item-list">
<input ng-focus="focusItem($index, $parentIndex)" ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">
</div>
</li>
</ul>
</div>
Thanks in advance.
You could set a placeholder on the input conditionaly, and If its true set to some value from the scope for example:
<input placeholder="{{value.active && !value.old ? placeholder : ''}}" ng-focus="focusItem($index, $parentIndex)" ng-disabled="!value.active" ng-class='{active: value.active && !value.old}' type="text" class="form-control input-sm">
// controller
$scope.placeholder = "something";
See this plunker.
You can add a function to the $scope and check for the active = true on your data model.
//controller
$scope.getPlaceholder = function (item) {
if(item.active){
return item.tags;
}
}
//view
<input ng-focus="focusItem($index, $parentIndex)"
placeholder="{{getPlaceholder(value)}}"
ng-disabled="!value.active"
ng-class='{active: value.active && !value.old}'
type="text" class="form-control input-sm">
I forked your Plink

How do I replace part of the value of attributes for a set of elements in jQuery?

I am trying to replace a series of 'for' attributes of labels based on their current contents.
The application is using AJAX to add an item to an invoice without refreshing the page. Upon receiving notification of a successful item add, my script should replace all the labels in the form whose 'for' attribute ends with '-new' with the same attribute minus the '-new' and adding ('-' + itemValue), where itemValue is the item Id of the invoice item that was added.
I know how to select all the labels I want to change at once:
jQuery('label[for$=new]')
I know how to get their 'for' attribute:
jQuery('label[for$=new]').attr('for')
I tried the JavaScript replace method:
jQuery('label[for$=new]').attr('for').replace(/-new/,itemValue)
But that appears to select each label's 'for' attribute, replace the text, and pass the replaced text back (to nothing), since I don't know how to identify the labels that have the 'for' attribute I want to replace.
Here's some sample HTML:
<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="InvoiceItemsForm-1" onsubmit="return false">
<div id="InvoiceItem-new-1" class="InvoiceItem">
<label for="InvoiceItemNumber-new">New Invoice Item Number: </label>
<input id="InvoiceItemNumber-new" class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber-new">
<label for="InvoiceItemDescription-new">Item Description: </label>
<input id="InvoiceItemDescription-new" class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new">
<label for="InvoiceItemAmount-new">Item Amount: </label>
<input id="InvoiceItemAmount-new" class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new">
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem">
</div>
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button>
</form>
Once I get this to work, I'm going to replace all the ids for all the inputs. Same problem. I imagine the solution looks something like this:
jQuery('input[id$=new]').attr('id').replace(/-new/,itemValue)
I just cannot figure out the syntax for this at all.
No need to use .each() ... the .attr() method accepts a function as the second parameter that returns the new value to be used as replacement
jQuery('label[for$=new]').attr('for', function(index, currentValue){
return currentValue.replace(/-new/,'-' + itemValue);
});
If I may, why not just put the input tag inside the label tag? That way, you won't need a for attribute inside the label tag.
Next, a better way to accomplish what you're trying to do would be to use the invoice ID number as the ID for the surrounding div, and add a 'new` class for "new" invoice entries.
So your form would look something like this:
<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF']" method="post" name="InvoiceItemsForm-1" onsubmit="return false">
<div class="InvoiceItem new">
<label>New Invoice Item Number: <input class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber"></label>
<label>Item Description: <input class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new"></label>
<label for="InvoiceItemAmount-new">Item Amount: <input class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new"></label>
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem">
</div>
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button>
</form>
You'll still have all the targetability you need to get the new invoice item field data, but now, you only have two things to do to convert from a "new" invoice row to an "existing" invoice item row: add an id attribute to the div and remove the new class, both of which jQuery will let you do quite easily.
Not sure I get the question, but something like:
var oldFor = $('label[for$=new]').attr('for');
var newFor = oldfor.replace(/-new/,itemValue);
$('label[for$=new]').attr('for', newFor);
.attr( attributeName, value )
attributeName = The name of the attribute to set.
value = A value to set for the attribute.
When selecting multiple elements, you will need to iterate:
$('label[for$=new]').each(function(index) {
$(this).attr('for', $(this).attr('for').replace(/-new/, '-' + itemValue));
});

Categories