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
Related
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' }];
<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?
I'm currently learning AngularJS but I wasn't able to find a solution for this problem even though it seems trivial.
I have two lists / controllers that are getting created by factory service.
I want to remove an object from list 1 and add to list 2. When I display the object in the console after passing it, I can see it but it doesn't appear in my second list.
I have the code on GitHub - As you can see this is an assignment from coursera.
https://github.com/alaimoclaudia/assignment2_solution
I am not sure I am answering your question, but I have created a plunker based on your github code:
https://plnkr.co/edit/oNvezy5IQ9EBKMpwWq7j?p=preview
I see only one list of items in the code:
[{
name: "Milk",
quantity: "10"
}, {
name: "Donuts",
quantity: "10"
}, {
name: "Cookies",
quantity: "10"
}, {
name: "Chocolate",
quantity: "10"
}, {
name: "Apples",
quantity: "10"
}];
And it seems like the ui behaves as expected.
I am working on a application which is nicely modularized using requirejs. One of the modules called data service is in charge of providing other modules with data. Pretty much all get* methods of this module return javascript script objects in the the following format:
res = {
totalRows: 537,
pageSize: 10,
page: 15,
rows: [
{
id: 1,
name: 'Angelina'
...
},
{
id: 2,
name: 'Halle'
...
},
{
id: 3,
name: 'Scarlet'
...
},
{
id: 4,
name: 'Rihanna'
...
},
{
id: 5,
name: 'Shakira'
...
},
....
//10 rows
{
id: 10,
name: 'Kate'
...
}
]
}
Is it possible to initialize the data table by providing it with rows for the current page, current page number, page size and the total number of records or pages so that it "knows" which page is currently being displayed as well as the number of available pages. Which in turn would allow the DT to build the pager correctly allowing the user to navigate to other pages in which case we would make another call to data service module to retrieve data from the database for the selected page.
I would like to generate this array in a JavaScript file
var sports = [{ id: 1, value: "Baseball" },
{ id: 2, value: "Soccer" },
{ id: 3, value: "Basketball" },
{ id: 4, value: "Volleyball" },
{ id: 5, value: "Tennis" },
{ id: 6, value: "Running" },
{ id: 7, value: "Swimming" },
{ id: 8, value: "Tournament"}];
I have started with:
var sports = db.Sports;
But now I am stuck on how to include this in a JavaScript file. Does .net have embedded JavaScript file like Rails do?
You'll need to just retrieve the data and serialize it into javascript. If those two are the only columns, you can do a straight serialization with JavaScriptSerializer or JSON.NET. If not, you'll need to convert them, maybe something like (using JSON.NET):
var x = db.Sports.Select(s => new { id = s.id, value = s.value }).ToArray();
string json = JsonConvert.SerializeObject(x);
Once you have this JSON string, you can dump it onto a page however you want, or write it directly to the response.
If you need to know a specific way to do this part, we'd need more details (WebForms or MVC, inside a page or a separate javascript resource, etc.)
EDIT:
Adding it to the view once it's in the ViewBag is straightforward. Inside your script on the view:
var sports = #Html.Raw(ViewBag.Sports);
// or if you're not using Razor:
var sports = <%= ViewBag.Sports %>;
Since ViewBag.Sports is already properly serialized, you don't need to worry about quotation marks or brackets.