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' }];
Related
I know, Vue Select docs specify that options should be an array, but is there a way around it? I want to use object keys as values and object values as labels.
My data:
obj: {
value: 'en',
options: {
'ar': 'Arabic',
'ast': 'Asturian',
'en':' English'
}
}
<v-select
v-model="obj.value"
:options="Object.keys(obj.options)"
>
I know i can use keys as options that way, but I have no idea how to use values as labels. Any tips?
There are multiple ways you could do that but one options is:
<v-select v-model="obj.value" :options="obj.options" :reduce="val => val.code"/>
Only change to your data should be that the obj.options should look like below:
obj: {
value: "en",
options: [
{ label: "Arabic", code: "ar" },
{ label: "Asturian", code: "ast" },
{ label: "English", code: "en" }
]
}
Relevant documentation transforming-selections
<q-checkbox
v-model=“formData.checks.options[].id
/>
Return data:
formData: {
checks:
[{
options:
[{
id: 1
},
{
id: 2
}]
},
{
options:
[{
id: 1
},
{
id: 2
}]
}]
}
Question -1: In the above scenario, I need to loop through multiple checks with their respective options. Is it a good practice to do two for loops. Say for example, one to loop all checks and second to loop all options with loop 1 index?
Question -2: if I want to check default values for a specific checks list with respective it’s respective option. How can I do it?
My application is built in RoR and has two edit modes: normal and advanced. I’m bootstrapping to AngularJs the Normal view in which, users can edit some of the fields. In this view I have a table with seven columns, each of these columns receives and passes data from and to a json object. This view features a table and in the first row I'm using ng-repeat to populate with data the first seven rows using Angular’s limitTo filter. Up to this point everything works fine and the two way data binding works like a charm. The problem comes with one of the columns: a dropdown with integers going from one to ten, let’s call this column “row order”. The issue is this: in spite of the model being correct for all the other rows (and these rows therefore working as expected: get data from the advanced view or, accept new values as per the user and store the data in the json object) in the case of this dropdown, things just won’t work, as it only will display an empty slot (the very first before the numbers), when I select a number I get a 422 error. What else do I need to add to my controller? As I said, the other rows follow the same exact model of series.* and everything works fine. Below: the table cell and the controller.
<td ng-controller="rowOrderCtrl" >
<select class="form-control" ng-model="series.row_order" id="chart_data_series_attributes_{{$index}}_row_order" name="chart[data_series_attributes][{{$index}}][row_order]" ng-change="updateChart()" ng-options="row.value as row.key for row in rowOrder">
</select>
</td>
'use strict';
angular.module('myApp').controller('rowOrderCtrl', function($scope) {
$scope.rowOrder = [
{ key: 1, value: 1 },
{ key: 2, value: 2 },
{ key: 3, value: 3 },
{ key: 4, value: 4 },
{ key: 5, value: 5 },
{ key: 6, value: 6 },
{ key: 7, value: 7 },
{ key: 8, value: 8 },
{ key: 9, value: 9 },
{ key: 10, value: 10 }
];
});
def create_chart_data_series(chart)
((current_upper)..10).each {|counter|
# charts.data_series << DataSeries.build(:row_order => counter)
chart.data_series.build(:row_order => counter)
}
end
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.
http://jsfiddle.net/WcJbu/
When I select a person, I want the favoriteThing selector to display their current selection.
<div ng-controller='MyController'>
<select ng-model='data.selectedPerson' ng-options='person.name for person in data.people'></select>
<span ...> likes </span>
<select ... ng-model='data.favoriteThing' ng-options='thing.name for thing in data.things'></select>
</div>
$scope.data.people = [{
name: 'Tom',
id: 1,
favorite_thing_id: 1
}, {
name: 'Jill',
id: 2,
favorite_thing_id: 3
}];
$scope.data.things = [{
name: 'Snails',
id: 1
}, {
name: 'Puppies',
id: 2
}, {
name: 'Flowers',
id: 3
}];
Do I need to set up a service and add watches, or is there a [good] way to use the favorite_thing_id directly in the select?
Change the second select to this:
<select ng-show='data.selectedPerson' ng-model='data.selectedPerson.favorite_thing_id'
ng-options='thing.id as thing.name for thing in data.things'></select>
Adding the thing.id as to the ng-options will allow you to select the data.things entries based on their id's instead of their references. Changing the ng-model to data.selectedPerson.favorite_thing_id will make angular automatically change to the correct option based on selectedPerson.favorite_thing_id.
jsfiddle: http://jsfiddle.net/bmleite/4Qf63/
http://jsfiddle.net/4Qf63/2/ does what I want - but it's pretty unsatisfying.
$scope.$watch(function() {
return $scope.data.selectedPerson;
}, function(newValue) {
if (newValue) {
$scope.data.thing = $filter('filter')($scope.data.things, {id: newValue.favorite_thing_id})[0];
}
})
I'd like to see all of that be possible from within the select statement.
Maybe I'll try to write a directive.
association = {key: matchValue}
So that I can do
<select ... ng-model='data.thing' ng-options='t.name for t in data.things' association='{id: "data.selectedPerson.favorite_thing_id"}'></select>