Need to put a clear icon inside text box of primeNg. And on click it should clear the field.
For PrimeNG version 11
It's easy, just modify the sample code provided in the documentation slightly to add (click).
component.html
<span class="p-input-icon-right">
<i class="pi pi-times-circle" (click)="clearfilter()" ></i>
<input type="text" pInputText [(ngModel)]="value2" >
</span>
component.ts
clearFilter() {
this.value2 = '';
}
component.css
.pi.pi-times-circle {
z-index: 1;
}
For Primefaces
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="fa fa-fw fa-search"></i>
</span>
<input type="text" [value]="search_text" placeholder="Search" #texttosearch (keyup)="onKey(texttosearch.value)" pInputText>
<span class="ui-inputgroup-addon">
<i class="fa fa-fw fa-times" (click)="texttosearch.value = ''"></i>
</span>
</div>
This question is more related to CSS. Anyways I hope you are looking for something like this.
Below Code will show the icon at the right side, inside Primeng text box:
<input type="text" pInputText placeholder="Username">
<span style="margin-left:-20px;">
<button (click)="userclick()" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
<i class="pi pi-times"></i>
</button>
</span>
If you want to see the icon in left side, inside the text box:
Then use the span before input type and adjust the margin.
I am using inline CSS just to serve your purpose. But I highly recommend make a class
and use these properties there.
You can do something like this -->
<input
type="text"
pInputText
placeholder="Type Text"
[(ngModel)]="text"
(input)="someText($event.target.value)"
style="width:auto"
/>
<span style="margin-left:-20px;">
<a (click)="clearText()">
<i class="fa fa-times" style="color: rgb(149, 149, 153); cursor: pointer;"></i>
</a>
</span>
Related
I have retrieving the contents from database using $http.get api and displaying each record using ng-repeat. For each record i have a like and comment button. On clicking on comment button, i will show input box with send button previously it will be hidden(using ng-show). The problem is- on clicking any one of the record comment button,all other records input box with send button will be shown including clicked.
<div ng-repeat="dat in details">
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
</ul>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="mycomment()"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<div class="input-group" ng-show="comment1">
<input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
mycomment() method in script looks like-
$scope.comment1= false;
$scope.mycomment = function() {
$scope.comment1= true;
}
How can i change the name of ng-show-"comment1" dynamically(if I change, I have to change the name in script too) ?? is there any other way?
Try this:
<div ng-repeat="dat in details | filter : { product_name : textname} as results">
<hr/>
<p style="color:#4C97C8;" class="lead"><strong>{{dat.summary}}</strong></p>
<ul>
<li><b>Product:</b><span> {{dat.product_name}}</span></li>
<li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
<li><b>Description:</b><span> {{dat.description}}</span></li>
</ul>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button>
<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="comment=true"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
<div class="input-group" ng-show="comment">
<input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span>
</div>
</div>
Instead of ng-click="mycomment()" and ng-show="comment1": ng-click="comment=true" and ng-show="comment" accordingly. $scope.comment1 and $scope.mycomment are not needed.
I have list of data comes using ng-repeat and I bound as below.
<div class="col-xs-12" ng-repeat="rl_node in rl.nodes">
<div class="row">
<div class="col-xs-12 col-sm-3">
<span ng-hide="editRoleEntity">{{rl_node.id}}</span>
<input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
</div>
<div class="col-xs-12 col-sm-6">
<span ng-hide="editRoleEntity">{{rl_node.title}}</span>
<input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleName" ng-model="rl_node.title" placeholder=""/>
</div>
<div class="col-xs-12 col-sm-3 text-right">
<a class="pull-right btn btn-danger btn-xs" ng-click="editEnable(rl_node)" ng-if="!editRoleEntity"><span class="glyphicon glyphicon-trash"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = false" ng-if="editRoleEntity"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="save(rl_node)" ng-if="editRoleEntity" style="margin-right: 8px;"><span class="glyphicon glyphicon-ok"></span></a>
<a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = true"><span class="glyphicon glyphicon-pencil"></span></a>
</div>
</div>
</div>
I have four button Edit, Save, Cancel & Remove.
The Issue I'm facing is that once making editRoleEntity = true, it makes enable to all row's data
In Above image I tried to edit first row,
Please suggest how I can show textbox only for that row where I click edit icon.
Thanks
Not sure what is the code inside editEnable(rl_node) method; you can have something like this:
function editEnable(rl_node)
{
//depends on how you specify the scope variable - it could be $scope.property or this.property
$scope.selectedNodeId = rl_node.id;
}
and in html:
<span ng-hide="selectedNodeId !== rl_node.id">{{rl_node.id}}</span>
<input ng-show="selectedNodeId === rl_node.id" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
Basically i would like for one dive to be hidden when someone adds text to a box.
I have a form where someone can either upload an image or add a link to an image. When the user adds an image link i would like to hide the upload button
Right now i have it that when they select an image to upload the text box will be hidden but i cant get the vice versa working.
Id like to hide the div "manual-upload" when a user adds text to the data-ng-model="dealsCTRL.urlimage"
<div class="manual-upload">
<div class="text-center form-group controls" ng-hide="uploaderProduct.queue.length">
<span class="btn btn-default btn-file">
Select Image <input type="file" nv-file-select uploader="uploaderProduct">
</span>
</div>
<div class="sub-label"> Upload an image of product.</div></br>
<div class="text-center form-group" ng-show="uploaderProduct.queue.length">
<button class="btn btn-primary" ng-click="uploadProductPicture();">Upload</button>
<button class="btn btn-default" ng-click="cancelProductUpload();">Delete</button>
</div>
<div ng-show="success" class="text-center text-success">
<strong>Upload Successful</strong>
</div>
<div ng-show="error" class="text-center text-danger">
<strong ng-bind="error"></strong>
</div>
</div>
<div class="add-image-link">
<label class="control-label" for="urlimage" ng-hide="uploaderProduct.queue.length">IMAGE URL</label>
<div class="controls" ng-hide="uploaderProduct.queue.length">
<input type="url" data-ng-model="dealsCTRL.urlimage" id="urlimage" class="form-control"
placeholder="Image URL" ng-change="blankPhoto()" required>
<div class="sub-label">Manually enter an image URL.</div>
</div>
</div>
You want to hide the element when you start typing so
div class="manual-upload" ng-hide="dealsCTRL.urlimage.length > 0"
Please try the following:
<div class="manual-upload" ng-show="dealsCTRL.urlimage.length === 0">
NOT DUPLICATED
I have a search with an input, a button and another button to toggle the advanced search:
<form role="form">
<div class="form-group ">
<input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
<div class="btn-group " >
<button type="button" ng-click="search()" class="btn btn-default">Submit</button>
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
<div id="subMenu" class="dropdown-menu advanced-search">
<div class="form-group">
<label for="usr">Find documents with...</label>
<input type="text" class="form-control" ng-model="adSearch.q1">
</div>
<div class="form-group">
<label for="usr">And</label>
<input type="text" class="form-control" ng-model="adSearch.q2">
</div>
<div class="form-group">
<label for="usr">Or</label>
<input type="text" class="form-control" ng-model="adSearch.q3">
</div>
<div class="form-group">
<label for="usr">Not</label>
<input type="text" class="form-control" ng-model="adSearch.q4">
</div>
</div>
</div>
</div>
</form>
When i press the enter key, the button of the advanced search is which takes the action.
I would like to know what can i do to the normal search (the fisrt button) takes the action when i press the enter key.
I do not want use jquery or javascript i need to do it with angularjs, i thought i could do it with just css but seems like i can not.
I can use this:
$scope.onKeyDownEnter = function($event){
if ($event.keyCode === 13) {
console.log("yeeeee");
}
};
But this also toggle the "subMenu", I do not know how to disable the behavior of that "subMenu" when i press the enter key.
Extra information:
Here i have the subMenu before press enter key
Here i have the subMenu after press enter key
I do not know why this code was the cause of this problem:
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
If you have this problem, just add type="button" like this:
<button type="button" class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
And all will work fine
As you have used autofocus in your search input box you can use jquery to get focus on your normal search button:
$(document).ready(function(){
$('#search-button').blur(function(){ $('#save-btn').focus(); });
});
Ps: please give ID to your button save-btn to get this working.
Did you try to apply focus ?
Like this :
$('#myButton').focus();
How do I add a ng-click event to a bootstrap glyphicon in a textbox? The event doesn't get fired...
<body ng-app ng-init="mymodel='THIS IS MY MODEL'">
<h3>How to clear the model on remove icon click?</h3>
<div class="container">
<div class="form-group has-feedback" >
<input type="text" class="form-control" ng-model="mymodel"/>
<i class="glyphicon glyphicon-remove form-control-feedback"
ng-show="mymodel" ng-click="mymodel = null"></i>
</div>
<p>This is my model: {{mymodel}}</p>
<strong ng-click="mymodel = null">This works tho...</strong>
</div>
</body>
Plnkr link
This is happening because glyphicons provided with " pointer-events: none;" as default you can override it and remove this functionality by simple CSS:-)
.my .glyphicon {
pointer-events: all;
}
<div class="form-group has-feedback my" >
<input type="text" class="form-control" ng-model="mymodel"/>
<i class="glyphicon glyphicon-remove form-control-feedback"
ng-show="mymodel" ng-click="mymodel = null"></i>
</div>
Plunker