How to fill selected file name in text box in angularjs - javascript

This is the code.
<button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
<span class="glyphicon glyphicon-picture"></span> Pick Image
</button>
<input type="text" ng-model="f.name" value="b.files[0].name"><br><br>
<ul>
<li>{{b.files[0].name}}</li>
</ul>
When user selecting a file to upload, it is displaying in ul - li. But i want same file name to be displayed in text box also. For that i am setting text box value to value="b.files[0].name". But its not working.
Any help on this?

EDIT: Value is always overwritten by ng-model if present, so you should use this:
<input type="text" ng-model="b.files[0].name">

Related

Dropdown Checkbox Closes when Item Checked, and Doesn't Save Selection

I'm new to Javascript and AngularJS, and currently trying to implement a dropdown checkbox via a button (For a search filter). I currently am able to have the dropdown appear, but when I check a checkbox, the dropdown immediately closes. The checked item is also not saved as checked when I open the dropdown again. Here's what I have in my tpl.html:
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" bs-dropdown data-template-url="dropdown-template" data-placement="bottom-right">
<span class="fa fa-filter"></span>
</button>
<li class="dropdown-filter">
<script type="text/ng-template" id="dropdown-template">
<ul class="dropdown-menu">
<div>
<input type="checkbox" id="disabledStores">
<label for="disabledStores">Show Disabled Stores</label>
</div>
</ul>
</script>
</li>
</div>
What am I doing wrong?
You need to save the value of the selection within a property and use the ng-model to bind to the html.
In your controller must have :
disabledStored : boolean = false.
And in your templare :
<input type="checkbox" id="disabledStores" ng-model="disabledStored">
When the checkbox is selected the value of the property will be true.

Styling submit buttons -- Rails app

I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?
This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon
The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.

Setting Default Value in Bootstrap Drop Down

I am building an app with Bootstrap. In this app, I have a control that converts a value between imperial and metric values. To accomplish this, I currently have the following:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Pounds</li>
<li>Kilograms</li>
</ul>
</div>
<input id="theValue" type="hidden" data-start-type="kg" />
</div>
When the control theValue element is populated from the server, it will either be "lb" or "kg". I want to make it so that the selected menu option is based on the value of theValue when the page initially loads. In other words, I do not want to see the text "Action". Instead, I need to select either Pounds or Kilograms when the view loads.
How do I do this from jQuery?
Using jQuery, you would select the theValue element, access its data-start-type attribute, find the a element with the same data-type attribute, and then use its text value to set the text of the button. You'll want a unique way to identify the button for selection in jQuery, so give it an id; I used "actionButton".
$(document).ready(function(){
var data_start_type = $('#theValue').attr('data-start-type');
var $data_type_elem = $('[data-type='+data_start_type+']');
$('#actionButton').text($data_type_elem.text());
});
Here's a jsFiddle: http://jsfiddle.net/7g9k2dwx/

Tooltip issue in angularjs

I want dynamic text tool tip for input box and i have used bootstrap 3.1.1 here with angularjs 1.2.16
but i am getting value as undefined through ng-model of input box.
HTML
<div class="input-group">
<input type="text" class="form-control input-sm" ng-model="searchColumnOfDatagridQuery1" placeholder="Search {{columnData[0].text.toLowerCase()}} here" tooltip="Search {{columnData[0].text.toLowerCase()}} here" tooltip-trigger="mouseenter" tooltip-placement="bottom" tooltip-append-to-body="true">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button" ng-click="searchColumnOfDatagrid(searchColumnOfDatagridQuery1,1)"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
JSFiddle
I have update my code here
Can any one tell me why i am not getting ng-model value here and how to resolve this issue?
How to get ng-model value of text-box because on click of button i am getting undefined value?
$.parent.Whatevermodel property you have is the solution. Please check following plunkr, it is working for me.
http://plnkr.co/edit/cnm0pGYXBHda4I5hpYYi?p=preview
Upvote and accept it as answer if it helps:)
I've found workaround for this here
you can change value of your ng-model attribute from searchColumnOfDatagridQuery1 to: $parent.searchColumnOfDatagridQuery1 and it should works just fine.

Adding more input fields on click inside a bootstrap input-append

im using twitter bootstrap.I need a
1.select-box + input field with autocomplete.
2.Add row button which adds an input field
3.remove row button
4.save button which submits all the values selected.
<div class="well-large">
<div class="row">
<button type="button" class="btn btn-default">Save</button></br>
<div class="input-append btn-group">
<input class="span2" id="appendedInputButton" size="16" type="text">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<?php foreach($cars as $ar){?>
<li><i class="icon-pencil"></i><?php echo $ar;?></li>
<?php }?>
</ul>
</div>
</div>
</div>
var cars = <?php echo json_encode($cars) ?>;
$("#appendedInputButton").autocomplete({
source: cars,
fillin:true
});
I had tried many ways but either one of these is not working.Can someone suggest me a way to solve this .Mainly on add row .
For One >> Does the autocomplete need to pull data dynamically, like typing into google URI bar auto searches google, or just isolate fields based on typed criteria. i.e. you type "a" and it displays only annie, annabelle, amy, then you type "n" making your field "an" and no longer displaying amy
For Two >> check these jquery methods [http://api.jquery.com/category/manipulation/dom-insertion-inside/] and pick the one that best suits you. The bind it to a button and have the jqueryStuff() function add the DOM stuff you want
<button onClick="jqueryStuff()">Add Row</button>
For Three >> Use the same thing as 2 but from [http://api.jquery.com/category/manipulation/dom-removal/]. Do you want to have check boxes then remove, or the easier way and just remove the last on the list.
<button onClick="jqueryStuff()">Remove Row</button>

Categories

Resources