I am newbie to Angularjs. Here is my scenario.
I have an array of
numbers = ['1','2','3'];
And also have a
<select id="fileNumber" ng-model="files"></select>
How Can I add the values of array to the dropdown list fileNumber
I tried,
ng-options="numbers"
Can anyone say how to include array value to dropdown list.
Here's an example for working with select and adding values to array:
Update:
<select ng-model='selectedNumber' ng-options='number for number in numbers'></select>
<button ng-click="add()">add</button>
Live example: http://jsfiddle.net/choroshin/MTfRD/643/
Read and follow ng-select directive
Related
Please could I ask for help with the following:
I have a select control defined as below and I populate it's options with strings from an array of strings in my component called tools.Attributes.Serials It works fine:
<select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
<option *ngFor = 'let serial of tools.Attributes.Serials'>
{{serial}}
</option>
</select>
The displayed list will show the first item as the selected one.
Say I have a variable in my component's .ts code called nMyIndex = 1.
What code do I need to bind to nMyIndex so that the list appears with item 1 as default rather than item 0?
Thanks for any help,
OK, I found it, working now. Need to use as shown in following code snippet:
; let i = index' [selected]="i == nMyIndex"
By default oj-select-one displays only the first 15 values and then forces the user to search for remainder.
Is there a way to make oj-select-one show all values in the drop down list without having to use search ?
I tried using minimumResultsForSearch as below, this but this does not help.
<oj-select-one id="select1"
options="[[dataProvider]]"
value="{{selectVal}}"
minimumResultsForSearch="50"
style="max-width:20em">
</oj-select-one>
I am using the example in http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=selectOne&demo=dataFiltering
You chose the right attribute but used the wrong syntax. It should be minimum-results-for-search instead of minimumResultsForSearch
<oj-select-one id="select1"
options="[[dataProvider]]"
value="{{selectVal}}"
minimum-results-for-search="50"
style="max-width:20em">
</oj-select-one>
I'm currently working with AngularJs and am filtering an input array with a number of select boxes. On the filtered result, I'm running an ng-repeat to display each element in my now filtered array. Now my question. I want to save the filtered input array as an javascript variable, to later display or print the whole result. I actually only want either the filtered input array saved to a javascript variable or even better, the results of each ng-repeat saved altogether in a variable but updating itself after applying a new filter or a filter again. I'm stuck here. Is there a smooth way to do this. Or do you have a even better idea what would work here? Thank's already.
Let's say we have a filter for languages and name:
<select class="form-control"
ng-options="l.language for l in languages"
ng-model="languageModel"
></select>
<select class="form-control"
ng-options="n.name for n in names"
ng-model="nameModel"
></select>
<ul ng-repeat="sq in input| filter:languageModel| filter:nameModel>
<li>Language: {{sq['Language']}}</li>
<li>Name: {{sq['Name']}}</li>
</ul>
Now I want something like :
$scope.var = ... // The filtered result.
You can directly store the array in your ng-repeat
<ul ng-repeat="sq in (filteredInput = (input| filter:languageModel| filter:nameModel))>
Now you can access $scope.filteredInput to get the filtered array
You can call the filter directly from javascript:
$scope.filteredInput = $filter('languageModel')($scope.input);
Where languageModel is the name of your filter.
Make sure to inject $filter in your controller.
By the way, it is weird to have the ng-repeat on the <ul> element. Something more appropriate would be to put it on the <li>:
<ul>
<li ng-repeat="sq in input| filter:languageModel| filter:nameModel>
<span>Language: {{sq['Language']}}</span>
<span>Name: {{sq['Name']}}</span>
<li>
</ul>
You can write your own filter function in your code behind, something like this
$scope.filterlanguage=function(item){
//add your condition if satisfies return or null
if(condition)
{
return item;
}
return null;
}
In My project,we used data grid using AngularJS Implementation as follows.
<div id="entityGrid" ui-grid="selectedOptions" ui-grid-selection data-ng-model="selectedOptions"></div>
i can get selected item in grid as below using angular.js .
"entity" : $scope.createString($scope.selectedOptions.data)
but i also want to get selected item in grid using jquery/javascript due to some requirement..
i tried to get value using jquery as below. but it didn't work.
var entity = $('#entityGrid option:selected');
please help here.
You question is not very clear. I wonder if you could provide a plunker of your codes.
Here is one:
http://plnkr.co/edit/3KXrUuCsSACuhefmyzxN?p=preview
When you click "Copy" button, the following function is invoked:
$scope.copySelection = function (){
$scope.retainSelection = $scope.gridApi.selection.getSelectedRows();
};
What you get in $scope.retainSelection is an object of key:value pairs. You can access which ever key of it.
Here is another question talking about this:
Where can I get Angular ui-grid selected items
Hope it helps.
So, What I'm trying to do is fairly simple with vanilla JS, but I'm using AngularJS and I would like to know how to do it the best way within the framework. I want to update the selected options in a multiple select box. I do not want to add or remove any of the options. Here is what my HTML looks like:
<select multiple>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Yellow</option>
<option value="4">Red</option>
</select>
Using the following array, I'd like to programmatically select/deselect options from this list:
[{id:1, name:"Blue"},{id:4, name:"Red"}]
When I set this array in the scope, I want the select box to deselect anything that is not Blue or Red and select Blue and Red. The standard response that I've seen on the Google Groups is to use ng-repeat. However, I can't recreate the list every time because the list of selected values is incomplete. As far as I can tell, AngularJS has no mechanism for this, and I'm at a loss as to how I would do this without resorting to using jQuery.
ngModel is pretty awesome! If you specify the indexes as a model selectedValues
<select multiple ng-model="selectedValues">
built from your list (selected) in a $watch
$scope.$watch('selected', function(nowSelected){
// reset to nothing, could use `splice` to preserve non-angular references
$scope.selectedValues = [];
if( ! nowSelected ){
// sometimes selected is null or undefined
return;
}
// here's the magic
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push( val.id.toString() );
});
});
ngModel will automatically select them for you.
Note that this data binding is one-way (selected to UI). If you're wanting to use the <select> UI to build your list, I'd suggest refactoring the data (or using another $watch but those can be expensive).
Yes, selectedValues needs to contain strings, not numbers. (At least it did for me :)
Full example at http://jsfiddle.net/JB3Un/