KnockoutJS map value to function - javascript

Fiddle: http://jsfiddle.net/tdRCB/3/
I have an observableArray in my viewModel named filterInfo.
I have many html-controls to create filters (inputs, selects, etc)
What is the best way to get filterInfo containing all values in my html controls?
For example:
I have in input value 123 and in select value 1, so I need, that my filterArray contains two elements:
[{field: 'title', value: '123'}, {field: 'type', value: 1}]
If my input is empty and I selected in dropdown list only second element, resulting array will be:
[{field: 'type', value: 2}]
Thanks

I have written sample for your example.
http://jsfiddle.net/ivanov_vitaly/tdRCB/6/

Related

Pass different array every time in ng-repeat

I am generating comboboxes dynamically and I need to pass a different collection to the ng-repeat every time.How can I do that?
<div ng-repeat="choice in $ctrl.inputFilterRows">
<md-select ng-model="choice.name">
<md-option ng-repeat="filter in $ctrl.filters" value="{{filter.value}}" >
{{filter.value}}
</md-option>
</md-select>
</div>
Tried to set from the controller, but didnt work:
self.inputFilterRows[0].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];
An idea would be to use ng-if on several md-select elements and decide which one to enable based on a condition that suits you.
Another is to have a $scope variable that is linked to a single ng-repeat select, but you keep assigning new values to that $scope variable collection whenever you want. That would force a scope redraw and the ng-repeat would now use the new collection values.
Second one is probably cleaner.
EDIT:
Based on a better explanation provided in the comments below I now realise that you want a set of selects, each with their own set of options.
To achieve something like that I would suggest having an array of arrays, in which each object would represent a select, and then it's contents would be the options for that select.
$scope.selectArray = [
{ name: 'colours', filters: [{ value: 'black' }, { value: 'red' }, { value: 'blue' }] },
{ name: 'months', filters: [{ value: 'January' }, { value: 'February' }, { value: 'March' }] }
];
Now, you can have an ng-repeat iterating over selectArray (select in selectArrays) to create the selects, and then each one would contain another ng-repeat to iterate over the select.filters (filter in select.filters)
I am not going to write the exact code because you look like you know what you're doing and I'm sure you can put it together yourself very easily.
If you want to change the dataset of a specific select you can do something like:
$scope.selectArray[1].filters[0].value = 'December';
or
$scope.selectArray[1].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];

Angular chosen is not binding Array of Objects

I'm using angular chosen plugin for selecting an attribute on any select element.
My data is in this format:
$scope.pets = [
{
id: '1',
name: 'Dog',
desc:"Something"
},
{
id: '2',
name: 'Cat',
desc:"Something"
},
{
id: '3',
name: 'Rat',
desc:"Something"
}
];
And the angular choosen implementation for displaying the name using ng-options is:
<select multiple ng-model="myPets" ng-options="r as r.name for r in pets" chosen>
I'm able to get the drop down using ng-options for the above data like this,
But how can I bind the default values into the angular choosen input box if my ng model is bind to the following object:
$scope.myPets= {
id: '6',
name: 'Pig',
desc:"Something"
},
You can set the default values in the controller by using
$scope.myPets= [$scope.pets[0], $scope.pets[5]];
Compared to what you were thinking you need to use an array [] because you are using select multiple. You also have to directly refer to the existing objects or angular/javascript won't recognize the connection.

How to filter object attributes with AngularJS

I have a array of categories object
categoriesTree : [
{name: 'cat1', id:1, selected : true},
{name: 'cat2', id:2, selected : false},
{name: 'cat3', id:3, selected : true},
{name: 'cat4', id:4, selected : false},
{name: 'cat6', id:6, selected : true},
]
To get the selected categories I did:
selectedCategories = filterFilter($scope.categoriesTree, {selected:true})
this will give me:
categoriesTree : [
{name: 'cat1', id:1, selected : true},
{name: 'cat3', id:3, selected : true},
{name: 'cat6', id:6, selected : true},
]
But to reduce the POST data to send, I just want the id attribue so I want an array like this:
['1', '3', '6']
Is that possible to do with AngularJS filters ?
res = categoriesTree.map(function(el) { return el.id; });
Short and simple, with the good ole js.
To answer your question: no, with filters you can't, but it is possible with forEach
You can create your own custom angularjs filter that not only "filters" but also "projects" your set into a different set. I think you can definitely project each category object into just its ID.
See here for an example of how to create a custom filter in angularjs.
you can use underscorejs's _.pluck method.
selectedCategories = _.pluck(_.filter(categoriesTree, function(category) {
return category.selected;
}), 'id');
which returns an array of the values of all the id's where the corresponding selected value is true.

knockout.js not setting select option properly

Maybe I am misunderstand how this works. I want to use knockout.js to populate a select element options. I am using the following markup to achieve this:
<select data-bind="options: type_options, optionsText: function(item) {
return item.text;
}, optionsValue: function(item) {
return item.value;
}, optionsCaption:'Select a type...',
value: type">
Here is the relevant model code:
var myModel = {
type: ko.observable(),
type_options: ko.observableArray([
{text: "String 1", value:1},
{text: "String 2", value:2},
{text: "String 3", value: 3},
{text: "String 4", value: 4},
{text: "String 5", value: 5}
]),
}
Now the drop down renders correctly, with all the correct text and values, but when I select the an option from the drop down it doesn't set the value of 'type' correctly.
For instance if I selected the option labeled "String 4", and run the following command in the browser:
myModel.type()
I would expect it to return the value "4". Instead i get the object entire object:
Object
text: "String 4"
value: 4
__proto__: Object
My question is how do i get knockout to set the value of type based on the option's value attribute, instead of the entire object?
Well, you should be able to pass the text for the variable in you options array instead of a function. I don't know if that's what's causing the issue but your markup would look better like
<select data-bind="options: type_options, optionsText: 'text', optionsValue: 'value', optionsCaption:'Select a type...', value: type"></select>
That should get you what you want, see fiddle for full example.

Dojo FilteringSelect - marking specific options in dropdown as disabled (greyed out and not selectable) dynamically

I have a DoJo FilteringSelect created from <select>.
How I can make one (not selected) option as disabled dynamically?
Thanks
UPD: is it possible to REMOVE this element when FilteringSelect was created by PARSE?
Looks like there's a "disabled" attribute on __SelectOption. When you pass in options, try setting "disabled" to true.
new dijit.form.Select({
id: 's2',
options: [
{label: 'this is disabled', value: 1, disabled:true},
{label: 'this is enabled', value: 1}
]
}
See http://jsfiddle.net/ur87d/
Edit: You said dynamically... So you'll want to use updateOption or removeOption.
dojo.ready(function() {
var s2 = new dijit.form.Select({
id: 's2',
options: [{label: 'one', value: 1},{label: 'two', value: 2}]
});
s2.updateOption({label: 'one-updated', value: 1, disabled: true});
s2.placeAt(dojo.body());
});
See http://jsfiddle.net/ur87d/1/
It's not easy to make option disabled, but it's easy to make it invisible.
Bind your FilterSelect to an ItemFileWriteStore. The options are from items in the store.
You can dynamically add/remove items from the store.
So that your disabled options will not appear in the drop down.

Categories