I need to highlight the first value 'fullName' in select box using angularjs.
I am using angularstrap selectbox.
controller,
$scope.accountInfo.owners = [
{
"accounts":null,
"phoneumber":null,
"email":null,
"fullName":"MITA DASGUPTA",
"mobilePhoneNumber":null,
"noteFlag":false,
"number":130000000484
}
]
Template,
<button type="button" class="btn btn-default" placeholder="Pleasae select"
data-ng-model="owner.fullName"
data-html="1"
bs-options="owner as owner.fullName for owner in accountInfo.owners"
bs-select>
Action <span class="caret"></span>
</button>
I tried that way, but the value not selecting by default.
You should have some different ng-model name you already used owner in ng-options like selectedOwner
<button type="button" class="btn btn-default" placeholder="Pleasae select"
data-ng-model="selectedOwner"
data-html="1"
bs-options="owner as owner.fullName for owner in accountInfo.owners"
bs-select>
Action <span class="caret"></span>
</button>
Then you need to set value of ng-model from controller.
$scope.selectedOwner = $scope.accountInfo.owners[0];
You forgot to initialize the model which is capturing the selected values. You usually achieve this with an ng-init but it is also possible to intialize your model in your controller with the first element of your array. (And the appropriate field).
Related
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.
I'm using 'select' widget from angularstrap.
I'm wondering how to prevent the dropdown menu for the select only having one item. The only one item has been selected by default, how to prevent the click event on select to show the dropdown menu?
Is it a missing feature of angularstrap?
Check the Single select in example
It's not angularstrap feature, but you can use attributes like ng-hide, ng-show or ng-if to hide specific <div> element when your select has only one item.
UPDATE:
According to your example, change your Single select section:
<label>Single select: </label>
<button ng-if="icons.length > 1" type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" bs-options="icon.value as icon.label for icon in icons" bs-select>
Action <span class="caret"></span>
</button>
<button ng-if="icons.length === 1" type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1">
{{icons[0].value}}
</button>
I can't add gear icon, but I hope it's easy fix ;)
I'd do the same as #Egan Wolf mentioned, but the problem with that is the UX. It's not so nice to show the user something different just because the data has changed or not enough for a select box. I'd make it disabled, so that the user will get a clear visual feedback that he/she can't select more.
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">
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/
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>