I'm trying to filter an array on ngOptions:
Here a plunkr: http://plnkr.co/edit/OxL84mDdma9iS13wMnIX?p=preview
I have this array:
$scope.keys = [ {
id: 1,
name: 'ddddggggggggggggggggg',
applicationKey: 'dssssssssssssss',
kind: 'pingdom',
} , {
id: 2,
name: 'Ddd',
kind: 'moz',
accessId: 'ssss',
secretKey: 'aaaa',
} , {
id: 3,
name: 'MyAlexa',
kind: 'alexa',
secretAccessKey: 'ssssssssssssssssss',
accessKeyId: 'ssssssss',
}
]
And I'm trying to filter using somethig like this:
<select name="key" ng-model="keys"
ng-options="k.name for k in keys track by k.id | filter: {kind: 'alexa'}" >
</select>
Perhaps you might want to do the following:
<select name="key"
data-ng-model="keys"
data-ng-options="key.name for key.name in keys | filter: { kind: 'alexa' } track by key.id">
</select>
You must have the track by after you apply the filter.
EDIT:
The only issue you had in your markup is the track by expression being before the filter. The rest of differences are just personal preferences.
Try this code.
<select name="key" ng-model="keys"
ng-options="k.name for k in keys | filter: {kind: 'alexa'}" >
</select>
Related
I want to set up a checkbox structure and I want to handle it dynamically. I have an object response returned from my service. However, when I use this function in context, I get a string return and I cannot use ngFor.
form.demo.component.ts
getElementChoicesByNKey(nkey:string):choiceModel[]{
var element = this.findInComponentsByNKey(nkey);
var res = element.Choices;
return res;
}
this function gives the correct return.
form.demo.component.html
...
<ng-container *ngIf="item.Type == 'Choice'">
<ng-container *ngTemplateOutlet="choiceTheme; context:{ Id: item.Id, Label: item.Label, Choices: getElementChoicesByNKey(item.Id) }"></ng-container>
</ng-container>
...
<ng-template #choiceTheme let-Id="Id" let-Label="Label" let-Choices="Choices">
<nz-form-item>
<nz-form-label nzFor="Id">{{Label}}</nz-form-label>
<nz-form-control [formControlName]="Id" nzErrorTip="{{ 'form.requiredText' | translate }}">
<p>{{Choices.length}}</p>
<div *ngFor="let item of Choices">
<p>test</p>
</div>
</nz-form-control>
</nz-form-item>
</ng-template>
...
here Choices appears as string and won't let me use ngFor. I am getting an error as below.
Cannot find a differ supporting object '[
{ label: 'Apple', value: 'Apple', checked: true },
{ label: 'Pear', value: 'Pear', checked: false },
{ label: 'Orange', value: 'Orange', checked: false } ]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
What is the point I missed? Thank you for your help.
Use
*ngFor="let item of getChoices(Choices)" in template
and in component.ts
getChoices(choiceStr) {
return JSON.parse(choiceStr);
}
Since you are getting Choices as a string, parse the string to an array inorder for ngFor to work
I have this array of objects. that holds somethings like this.
[
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
im iterating thru the array here
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>
The thing item.modifiers model that has an array of this 2 id
[
1,2
]
I want the multi select to auto selected the two ids that are in the item.model
I want the final result to look something like this
Your code is pretty much working already, maybe some of the variables are not assigned correctly (eg. id instead of _id)
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.modifiers = [
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
$scope.item = {};
// add this for pre-selecting both options
$scope.item.modifiers = [1,2];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>
If I understand the question correctly, you're wanting to pre-select the two options.
To do this you will need to set your ng-model to point to the actual objects you are iterating over.
You will also need to change your ng-options to ng-options="modifier as modifier.name for modifier in modifiers" rather than just iterating over the ids.
Here's the relevant documentation under Complex Models (objects or collections)
https://docs.angularjs.org/api/ng/directive/ngOptions
Something like this should work:
HTML:
<select ng-model="$ctrl.item.modifiers"
ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
multiple chosen class="chosen-select" tabindex="4" >
</select>
JS:
app.controller("my-controller", function() {
var $ctrl = this;
$ctrl.modifiers = [{
id: 1,
name: "Extra Cheese"
}, {
id: 2,
name: "No Cheese"
}];
$ctrl.item = {
modifiers: []
}
$ctrl.$onInit = function() {
const id1 = 1;
const id2 = 2;
for (const modifier of $ctrl.modifiers) {
if (modifier.id === id1 || modifier.id === id2) {
$ctrl.item.modifiers.push(modifier);
}
}
}
}
Here's a pen showing the result:
http://codepen.io/Lahikainen/pen/WooaEx
I hope this helps...
I have an object as
{
key1: value1,
key2: value2
}
How will repeat this in ui-select-choices? I tried a few things but nothing worked as
<ui-select ng-model="selectedChoice" theme="select2">
<ui-select-match placeholder="{{'select_product' | translate}}" allow-clear="true">
<span ng-bind="$select.selected"></span>
</ui-select-match>
<ui-select-choices repeat="key as (key, value) in (productList | filter: $select.search)">
<span>{{::key}}</span>
</ui-select-choices>
</ui-select>
This should work:
<ui-select-choices repeat="product.key as (key, product) in productList | filter: {'value':$select.search}">
<span ng-bind-html="product.value"></span>
</ui-select-choices>
Angular UI Select iterates over objects kinda this way: during iterating for each pair (key, value) instead of accessing the value directly, an object (it's named product in my code above) is created that consists of two properties named key and value, where key is an actual key of the initial object, value is a value for the key. This object should be used to access a real value.
For example, for the following initial data object
{
key1: {
id: 1,
name: 'John'
},
key2: {
id: 2,
name: 'Alex'
}
}
on the first iteration such object will be created:
{
key: 'key1',
value: {
id: 1,
name: 'John'
}
}
For your data object, the following object will be created on the first iteration (product):
{
key: 'key1',
value: 'value1'
}
Here is my json
This.selectedColumn = null;
This.dynamicCmbItems = [{
id: 1,
label: 'aLabel',
subItem: [
{
name: 'aSubItem1'
},
{
name: 'aSubItem2'
},
{
name: 'aSubItem3'
}
]
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
In html I have two <select>s, first one displays label and second one should display subitem->name of selected label Eg: if I select aLabel in my first dropdown then second dropdown should show subitem of aLabel. I am able to load the first dropdown. How should I load second dropdown?
html file:
<select ng-options="item.label for item in vm.dynamicCmbItems track by item.id" ng-model="vm.selectedColumn" ></select>
<select ng-options="item.subItem.name for item in vm.dynamicCmbItems" ng-model="vm.selected"></select>
i want to do something like
<select ng-options="item.subItem.name for item in vm.dynamicCmbItems | fileter: {item.label : vm.selectedColumn}" ng-model="vm.selected"></select>
ng-model on the first select already binds the whole object for you, so in the second select you can just use
<select ng-options="item.name for item in vm.selectedColumn.subItems" ng-model="vm.selected"></select>
I have an application where I want to filter a long list of products based on value from "select" containing product types. The filter works, but only after I select something. It initially sets the "Show All" option, but filters out everything. If I select something else, it works, and if I re-select "Show All" it works. But why doesn't the filter work initially?
The model (looks something like this):
$scope.products = {[
{name: 'productA',Type: 1},
{name: 'productB',Type: 1},
{name: 'productC',Type: 2},
{name: 'productD',Type: 2},
]};
$scope.productTypes = {[
{Name: 'typeAlpha',Type: 1},
{Name: 'typeBravo',Type: 2},
]};
The HTML:
<select id="productFilter" data-ng-model="productFilter">
<option value="" selected="selected">Show all</option>
<option data-ng-repeat="type in productTypes" value="{{type.Type}}">{{type.Name}}</option>
</select>
<p data-ng-repeat="product in products | filter:{Type:productFilter} ">{{product.Name}}</p>
I recommend using ng-options instead of ng-repeat over the options:
<select id="productFilter" ng-model="productFilter"
data-ng-options="type.type as type.name for type in productTypes">
<option value selected="selected">Show all</option>
</select>
<p data-ng-repeat="product in products | filter:(!!productFilter || undefined) && {type: productFilter}">
{{product.name}}
</p>
For "show all", the filter must return undefined (ng-repeat filter "show all" items if no filter selected)
Also removed the {..} around the array and better use lower case for properties:
$scope.products = [
{name: 'productA', type: 1},
{name: 'productB', type: 1},
{name: 'productC', type: 2},
{name: 'productD', type: 2}
];
$scope.productTypes = [
{name: 'typeAlpha', type: 1},
{name: 'typeBravo', type: 2}
];
Here is a jsbin (based on Hiskinds)
http://jsbin.com/yepaqikodo/1/edit?html,js,output
This is a working example based on code above: http://jsbin.com/buzafisuko/edit?html,js,output
The Slava.N's comment is correct and you should not wrap productTypes and product in {}
Also, JavaScript is a case-sensitive language, product.Name is always undefined, you should use product.name in your HTML instead.
Use product.Type instead ofType inside 2nd ng-repeat filter
you set $scope.productFilter = ''.
so its return by default value blank at filter.