Apparently AngularJS cannot properly construct a list of <option> elements as a simple template in IE, so it provides the ng:Options directive (see https://github.com/angular/angular.js/issues/235).
After looking at the source, I was able to construct the options with the desired labels, as follows (JSFiddle):
<!-- what I'd like to do -->
<select>
<option ng:repeat='key in keys' value='{{key}}'> {{lookup[key].firstName}} {{lookup[key].lastName}} </option>
</select>
<br/>
<br/>
<!-- what Angular lets me do -->
<select ng-model='key' ng:options='k as lookup[k].firstName + " " + lookup[k].lastName for k in keys'></select>
However, when I inspect the options with Firebug, I see that the value is a numeric index, not my desired key value (I was hoping the initial k would be used as the option value).
I haven't looked deeply into the code, so don't know if there's another part of the expression that I'm missing (the regex doesn't seem to have any additional relevant keywords).
I was hoping that someone here might know this directive well enough to tell me (1) how to do it, or (2) that I'm out of luck.
Your desired key value is in the property you specify by ng-model, i.e., key. Add {{key}} to the bottom of your HTML (just after your last select list) to see it.
As you discovered, Angular stores the array index in the HTML. For more about this, see AngularJS - value attribute for select
Related
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
It seems that angular's behavior with respected to the selected attribute has changed back and forth with each major version. So I'm just looking for someone to tell me if this is achievable in the 1.5.x release using ng-options rather than ng-repeat.
What I'm trying to do:
Have angular create html like the following(so that it can be interpreted by a jquery plugin)
<select multiple="multiple"...>
<option value="abc123" label="Justin" selected="selected">Justin</option>
</select>
I've tried many variations of this
<select ms-multi-listbox multiple="multiple" class="multi-select"
id="ym" name="ym" ng-model="groupCtrl.memSelection"
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id">
with no luck.
the model looks like this:
groupCtrl.memSelection =["abc123"];//inbound from api as is selectableMembers
Here is a plunk I've been playing with (try changing the angular version for added confusion): Plunker
Any ideas are welcome.. I mainly wanted to avoid ng-repeat because it has a lot of overhead in longer lists but obviously slow is better than not working so I'll use it until I learn how to do this with ng-options.
Thanks!
edit:
Here is a ng-repeat that achieves the result I want:
<option ng-repeat="mem in groupCtrl.selectableMembers" value="{{mem.id}}" label="{{mem.displayName}}" ng-selected="groupCtrl.memSelection.indexOf(mem.id)>=0">{{mem.displayName}}</option>
enter code here
Be careful when using select as and track by in the same expression. AngularJS API ngOptions
Your expression for ng-options can't work. Using select as and track by in the same expression evaluates mem.id to mem.id.id. Change the expression to
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id"
And how you set the selected objects don't look right to me as well. You can not just set the id, you have to set the whole object as selected otherwise your ng-options expression evaluation will also fail. Therefore change your selection to (assuming selectable data is stored in $scope.model as it is in the plunk example).
$scope.memSelection = [$scope.model[0], $scope.model[1]]
I have updated the plunk and it works for single and multi selection.
For more information read AngularJS API ngOptions.
It seems like using direct attributes and the ng-attr-* directive do the same thing. For example, the following render equivalently:
<div ng-attr-id="{{ 'object-' + value }}">ID</div>
<div id="{{ 'object-' + value }}">ID</div>
When should I use ng-attr-* and when should I use the direct HTML attribute?
ng-attr is used for add or not the attribute in context. If the expression {{undefined || null}}, the attribute is not added otherwise if has a value then attribute is added with the value {{ value }}.
The most common cases is in interpolation.
Related:
Conditionally adding data-attribute in Angular directive template
You use them for custom html data attributes - like if you wanted an attribute of let's say myData you would do
<div ng-attr-myData="{{ 'object-' + value }}">ID</div>
There are only a few situations where ng-attr-[attribute]="{{angular stuff}}" is different from just [attribute]="{{angular stuff}}". Certain elements within certain browsers can be broken if ng-attr is not used. Angular's documentation lists a few examples:
size in <select> elements (see issue 1619)
placeholder in <textarea> in Internet Explorer 10/11 (see issue 5025)
type in <button> in Internet Explorer 11 (see issue 14117)
value in <progress> in Internet Explorer = 11 (see issue 7218)
Source: https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
ng-attr can be used to dynamically assign value to an attribute of any html element.
One case, where I used it was to associate a label to a form control with dynamic id.
<label ng-attr-for="{{parameter.name}}">{{ parameter.name }}</label>
<input ng-attr-id="{{parameter.name}}" type="text">
Also, it can be used to assign dynamic value to a custom attribute.
Reference: here
I've got an ng-grid that I want to be able to search on particular columns. The user enters some text and chooses a column from a dropdown. My UX guy doesn't much fancy the search-field-in-every-column-header that ng-grid supports.
Here is my Plunker:
http://plnkr.co/edit/WofBDA6QQkCDcwDMznzf?p=preview
(I haven't bothered with the text field yet, just worried about the field picker so far)
I've got a method that grabs the field and displayName for each field and populates my select with options, but for some reason, it gives me an empty first option. I don't want an empty one - and certainly not if it's going to look like this:
<option value="? undefined:undefined ?"></option>
I want it to default to a field of my choice (in the plunker example, I want it to default to 'age')
I can't figure out why I'm getting an undefined option - unless it's because the control is being rendered by my getFilterFields() function BEFORE the colDefs are fully defined. I've tried various ways of delaying the getFilterFields()function - I played with init: gridInit parameter, but so far, no joy.
How can I assure that
1] my dropdown contains ONLY valid columns, and
2] one of them is preselected?
It's better to use ng-options and set the model to the option that you want to be selected.
<select ng-model="selectedItem"
ng-options="item.value as item.name for item in filterOptions.filterFields">
</select>
and in the controller, set:
$scope.selectedItem = "age"; // equal to the value of the default option
I'm using a select tag with a ng-model attribute. I get the value of the selected element in ng-model. How is it possible to also get the label of the selected element.
I would like to retrieve both the label and its value. Thanks.
I'm guessing you are either using ng-repeat to create your choices, or typing them manually in the template. It is possible if you set your labels and values in the same model. If you have:
$scope.choices = {
"choiceone" : "The first Choice",
"choicetwo" : "The second Choice",
"choicethree" : "The third Choice"}
You can implement them like so:
<select ng-model="choice">
<option ng-repeat="(key, value) in choices" value="{{key}}">{{value}}</option>
</select>
However, this isn't the best way to use the select directive (assuming this is what you are doing). The select directive has a ng-options attribute that defines both value and label, in a cleaner fashion. I've edited the doc's example Plunkr on this subject, including a example usage of a ngRepeat here: http://plnkr.co/edit/sjQuhlgBh8WWJJoaSSMG?p=preview
Check here for the docs on the ng-options attibute: http://docs.angularjs.org/api/ng.directive:select