last day (14 days later) » 

07:33
1
Q: Show table shows according to select change with dynamic options

Gaurav AggarwalBelow is my html structure in which i am showing rows with active status and inactive status accordingly with the select change and its working fine. But now project requirements are change and the status can be many more apart of active and inactive so i want that select options should be creat...

Mic
Mic
Just to clarify my understanding, you want to dynamically populate the select options based on the unique statuses in the table?
@Mic yes i want to populate the options dynamically according to table cell text and also rows will show accordingly on select change. As of now the rows are displaying on select change but i have statically mentioned that
@SimonKraus Could you please show some code for the same??
Mic
Mic
Is there a particular reason you haven't created the table with an ng-repeat directive and bound it to a model? It kind of looks like you're using angular but not really adopting it's approach. And one more question, in your actual case, are you potentially dealing with the sort of volume where you would want to paginate your rows server-side?
@Mic you can ignore that because i just mentioned here a dummy small piece of code my actual application is much bigger and i am using ng-repeat in that but here my focus was on only select options and rows according to that select
Mic
Mic
@GauravAggarwal Okay, I see. In that case, the answer I posted will work for you. Let me know if it doesn't fit your needs.
07:33
@Mic i think the answer is brilliant just trying to understand it more as i am new to angular
Mic
Mic
@GauravAggarwal If you get stuck in any part in particular, let me know and I can add some explanation.
Hey Mic
could you please explain about this <tr ng-show="row.status===selectedFilter || selectedFilter === filterSet[0]">
what this code exactly checking
 
2 hours later…
Mic
Mic
09:39
Sure, okay, so breaking it down into parts, there are two expressions joined by the "or" operator || which I'm sure you know.
row.status === selectedFilter
That's for the current row (as specified in the ng-repeat), does the .status property equal to the selectedFilter (the ng-model for the select).
ya i know about the or operator
Mic
Mic
So it's called row because that's what I put in here:
<tbody ng-repeat="row in gridData">
... I could have put "record in gridData" or "x in gridData" or anything I wanted and then I would access it with record.status or x.status respectively.
It's like a for each loop.
Each repetition in the ng-repeat (each <tr> + its children, in this case) matches a two-way binding to an element in the $scope.gridData defined in my js file.
So really, it's like say: "for this element, does the status property equal (non-coercing) the value selected in the select. The string needs to be an exact match, so if you select box has "Active" it won't match rows that have "active" or "Active " (trailing space). It would treat those as separate unique values.
Okay, good with that side?
Moving on to the other half.
selectedFilter === filterSet[0]
So selectedFilter is the same as in the left side, it's the variable bound to the select value in the select box.
$scope.selectedFilter in the js file.
Checking whether it's equal to the first element in the $scope.filterSet array.
When I fill my list with this code:
$scope.filterSet = $scope.gridData.reduce(function(filters, item) {
if(filters.indexOf(item.status) === -1) {
filters.push(item.status)
}
return filters;
},['Select Action']);
That ['Select Action'] is the second argument I'm passing into the reduce function, which is the initial value. As reduce iterates over the elements, it uses push to append elements to the end (right side) of the array, so I know the first element is always that 'Select Action' prompt.
So that's what I'm checking on the right, is the Select Action prompt selected. By doing it using the array index, you can change the string you're using when nothing is selected, i.e. from 'Select Action' to 'Select Status', and you don't have to update it in the ng-show expression.
Mic
Mic
So the whole thing together is: show this row if its status equals the selected action or the selected action is the prompt in the first spot.
thanks for the support
really appretiated
Mic
Mic
no problem

last day (14 days later) »