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">
Related
This is my html block in angular
<div class="form-group" ng-repeat="n in [1, 2, 3, 4, 5, 6]">
<div class="choice-div" ng-if="webfront.customer_fields[$index].input_type == 4">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1">Choices : </label>
<div class="col-sm-9">
<div ng-repeat="textBox in webfront.customer_fields[$index].webfront_field_values" class="addtext-div">
<input ng-model="textBox.value" class="col-xs-10 col-sm-5 addtext_box" type="text" id="{{textBox.id}}" required="" placeholder="Value" autocomplete="off" style="width: 40%;">
<span ng-click="removeTextBox(webfront.customer_fields[$parent.$index].webfront_field_values, $index, textBox.id)" style="margin-left: 20px;cursor: pointer;"> <i title="Cancel this option!" class="raty-cancel cancel-off-png" data-alt="x"></i></span>
</div>
<span class="btn btn-sm btn-success" ng-click="addTextBox(webfront.customer_fields[$index].webfront_field_values)"><i class="ace-icon fa fa-plus"></i> Add Option</span>
<br class="clear"/>
</div>
</div>
This is my output of json formatted angular data
webfront{"id":1,"customer_fields":[{"id":24,"webfront_id":1,"name":"CA1","webfront_field_values":[]},{"id":25,"webfront_id":1,"name":"Education","webfront_field_values":[{"id":14,"webfront_field_id":25,"value":"B.tech"},{"id":15,"webfront_field_id":25,"value":"MCA"},{"id":16,"webfront_field_id":25,"value":"MBA"}],"customer_checkbox":true}]}
Below i have included the image how is my html
While there is data in the input field everthing working fine as i have mentioned above
But while there is no data only add option comes.Also the Add option for new text field not working.
I want there should be a text field on the top of the add option come and while click to the Add option new text field should come with remove option. Can anyone help me to solve this.
I'm working on an AngularJS project and in one of my views I have a table that will have pagination implemented on it. I want the controls for the pagination to be as follows:
Stacked horizontally, to have a Previous button, a text indicating the page of total of pages, and a Next button.
A select containing the number of elements per page desired to visualize on the table, and a text just saying "elements per page"
A text input to enter the number of page, and a Go to button that will load the indicated page.
All of these have to be sorted horizontally.
I defined this components like this in my view:
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="pagination pagination-sm">
<li >Anterior</li>
<li ><a>1 de 10 páginas</a></li>
<li>Siguiente</li>
</ul>
</div>
<div class="col-md-3">
<select class="form-control" ng-model="uc.defaultSelect" ng-options="n for n in uc.elementsPerPage" ></select>
<label>elementos por página</label>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Ir a página..." />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Ir</button>
</span>
</div>
</div>
</div>
</div>
But the end result I'm getting looks like this
The nav buttons look completely off line, the select is too big and it's pushing the label to a new line, the one that looks fine is the go to page input.
What kind of styling can I use with Bootstrap to achieve the look I desire?
In the end I had to give up on using the paginationstyle and changed to button-group, I removed some labels and ended up with this:
<div class="container">
<div class="row">
<div class="col-md-6 btn-group">
<button type="button" class="btn btn-default" ng-click="uc.previousPage()">Anterior</button>
<a class="btn btn-default disabled">1 de 10 páginas</a>
<button type="button" class="btn btn-default" ng-click="uc.nextPage()">Siguiente</button>
</div>
<div class="col-md-3">
<select class="form-control form-control-sm" ng-model="uc.defaultSelect" ng-options="n as (n + ' por página') for n in uc.elementsPerPage" ></select>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" ng-model="uc.page" class="form-control" placeholder="Ir a página..." />
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="uc.goToPage()">Ir</button>
</span>
</div>
</div>
</div>
</div>
Now I get this in my view:
I can just add some color to it if as necessary and I just got a pretty looking pagination toolbar.
I need some help.i need to display multiple image and when also user will select the image it will push into array.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12" ng-repeat="mul in mulImage">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
<div>
<div ng-class="{'myError': billdata.upload_{{$index}}.$touched && billdata.upload_{{$index}}.$invalid }">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="400" ngf-resize="{width: 400, height:400}" ngf-select="onFileSelect1('upload_{{$index}}',mul.image);">
<div style="clear:both;"></div>
<input type="text" id="hidn_{{$index}}" ng-model="attach_{{$index}}" style="display:none" />
</div>
</div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-" ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
</span>
</div>
</div>
Here i am using ng-file-upload to upload the multiple image by plus button.When user will select the image from local drive the the images are displaying.But there is an additional case i have some image name i need to display those first and if user will select more it can be also possible.
$scope.mulImage=[];
$scope.mulImage.push({'image':null});
$scope.addNewImageRow=function(mulImage){
mulImage.push({'image':null});
}
$scope.deleteNewImageRow=function(mulImage,index){
mulImage.splice(index,1);
console.log('file',$scope.mulImage[0]['image'].name);
}
The above is my controller side code.
var arr=["10lx18i3ciyhkt9_de021b24.jpg", "ajqgis4v1wi2j4i_a6d6c48a.jpg", "7pxknunjop9cnmi_silu nana.jpg"]
Suppose i have the above images before.When the page will refresh the first 3 images will display to user like upload/10lx18i3ciyhkt9_de021b24.jpg and 3 image row also will create.if user wants to add/delete it can be also possible.Please help me.
I have form on a dialog with some input field and a submit, a cancel buttons. I use ng-message for show input is wrong. But when i click cancel with ng-click="$dismiss()" for disable dialog then ng-message is show and action dismiss() is terminate. Some suggestion for me to resolve case
<form name="accountGroupForm" novalidate>
<div class="form-group"
>
<input id="group-name" class="form-control" name="groupName" placeholder="{{'Group name' | translate}}"
ng-model="accountGroup.name" ng-focus="true"
required>
<div ng-messages="accountGroupForm.groupName.$error" ng-if="accountGroupForm.groupName.$touched">
<div ng-message="required" class="help-block"><span translate>Group name is required</span></div>
</div>
</div>
<div class="wrapper row">
<div class="col-xs-6 text-right p-r-xs">
<button type="submit" class="hvr-grow btn btn-success w-sm"
ng-disabled="accountGroupForm.$invalid"
ng-click="submitAccountGroup()" translate>
Ok
</button>
</div>
<div class="col-xs-6 text-left p-l-xs">
<button class="hvr-grow btn btn-grey-blue w-sm" ng-click="$dismiss()" translate>Cancel
</button>
</div>
</div>
</form>
you can add an ng-if to the ng-message with its own variable then you can set that variable on the desired action. I usually set it on the form validations for $error and $dirty.
ng-show='myForm.inputBox.$dirty && myForm.inputBox.$error'
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();