I have a dynamically generated html table that adds rows based on the record that is displayed. I'm adding a column that will contain a dropdown. I used ng-options for it, however every time I change one record, the rest are also updated. Tried changing it to ng-repeat and get the same result. See code below:
<td>
<select class="form-control" ng-model="$ctrl.selectedRC" ng- options="r.ccd as (r.OName + ' -- '+ r.RCName) for r in $ctrl.RC track by r.ccd"> </select>
<!--if I have 5 records, all dropdowns in the table change -->
</td>
Using ng-repeat:
<select class="form-control" ng-model="$ctrl.selectedRC" <option value="" ng-selected="true">--Select one--</option>
<option ng-repeat="r in $ctrl.RC"
value="{{r.OName}}"
ng-selected="{{r.OName === selectedRC}}">{{r.RCName}}
</option>
</select>
I know that these two are currently displaying two different things (one a concatenated set of values, the other juts one). But my main interest is to figure out how to have each <td> have its own dropdown without affecting the rest of the rows.
Simply because you use the same ng-model for all rows.
You need to define a different one for each row.
You do this:
ng-model="$ctrl.selectedRC"
but you need something like this:
ng-model="$ctrl.selectedRC[$index]"
where $index is your reference to the row.
Related
I have an array, that consists a list of json objects as items. I am using this array as an options list for two select controls, here I want to hide first select control selected items in second select control options list.
Is it possible to do?
I don't know why are you looking for a pipe/filter solution when it can be done so easily without pipe? I may not be knowing entire scenario of yours but what you have written according to that a simple solution would be,
<select class="form-control" [(ngModel)]="selectedCity">
<option *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
// look at [disabled]="selectedCity==ct.id"
<select class="form-control" [(ngModel)]="selectedOtherCity">
<option [disabled]="selectedCity==ct.id" *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
detailed code could be found here : https://plnkr.co/edit/gkvFqtyddLVEsFOE07Ls?p=preview
Basic Problem
I have a multi-select (list) that depending on how I write the html/angular has a bug. In the first case the last 3 characters are cut off from the rendering. In the second case the name is not visible but instead the {{}} placeholder until the item is clicked.
I'd simply like a way for me to display the elements in a correct fashion without bugs.
Finally, this behavior seems to happen if an element is added to the categories array after the page and select has rendered.
With ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}" ng-bind="cat.name"></option>
</select>
Without ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}">{{cat.name}}</option>
</select>
With ng-options
With ng-options everything appears but I am unable to actually click on the elements to select them - they are frozen.
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
ng-options="cat.name for cat in categories track by cat.id" >
</select>
Since no-one wrote an answer, see my own work-around as the accepted answer.
My own workaround
It seems the problem was with adding an item to the categories array after the initial rendering has taken place. There we two workarounds I found:
Add all elements to the array only once without adding again OR
Hide the dom select element utilizing ng-if for 100ms and make it visible again. This forces the browser to re-render the elemnents and renders them correctly.
In HTML (wrapping the select):
<div ng-if="categories!=undefined && categoriesLoaded">
...Select code here...
</div>
In the controller (Javascript):
$scope.categoriesLoaded = false;
//Trigger render
$timeout(function(){ $scope.categoriesLoaded = true;}, 0);
What I'm trying to do is rather simple, I would think. I am trying to update a few values linked to an object in my controller based on what is selected from a select box. Hopefully you guys can shed some light on what I'm doing wrong.
My controller instantiates the object (which I'm not sure if I actually need to do):
$scope.newInvoice = {}
Then my html provides a dropdown box with a list of invoices that can be selected and the table should auto updated with the values from the selected invoices, but it does not:
<tr>
<td>
<select ng-model="newInvoice">
<option ng-repeat="name in names" value="{{name}}">{{name.Name}}</option>
</select>
</td>
<td>TBD</td>
<td>{{newInvoice.PoNumber}}</td>
<td>{{newInvoice.Price | currency}}</td>
<td>
<input type="number" ng-model="newInvoice.Quantity"/>
</td>
<td>{{newInvoice.Price * newInvoice.Quantity | currency}}</td>
</tr>
Essentially, the table does not fill in with the values provided from the select box. But if I print newInvoice to the screen with <pre>{{newInvoice}}</pre> I can see that newInvoice does in fact have all of the values, all properly named. So it would seem that the select box is binding well with the model. Any ideas?
Use ng-options instead of rendering options using ng-repeat, because when you use ng-repeat to render options, it does fill value attribute with object but that has been stringified. Where as if you use ng-options behind the scene it does assign actual object value to mentioned ng-model variable.
Markup
<select ng-model="newInvoice" ng-options="name.Name for name in names"></select>
I have a problem in reaching to newly created select option values
<tr class="multiplied">
<select id="company" name="companies[]">
<option value="0">Choose</option>
<option value="1">Compan </option>
<option value="1">Another Company </option>
<option value="1">Another Company 2 </option>
</select>
</tr>
When I select ona company I am taking that value and writing into another input, besides I have a jquery code which clones it that works like when I press to a button it loads that code
$("tr.multiplied:first").clone().insertAfter("tr.multiplied:last");
Everything works fine, the problem is when I clone that table row I cant reach the newly created rows.
The thing that I want to do is; taking the latest created companies[] value and insert into the same input.
How can I reach that ?
You need to change the id when you need to clone row. if not, jquery will still select your first row.
like this:
var nextId = 0;
$("tr.multiplied:first").clone().attr('id', 'id'+(++nextId)).insertAfter("tr.multiplied:last");
I'm struggling with the following and I'm not even sure if it's possible at all.
I have, at start, two pull down menus. Menu one with suppliers and (currently) a second pull down with all size of photos that are in the database. Where I want to go to is that when selecting a supplier, the second pull down menu changes with the option this supplier provides. So far nothing difficult using Jquery and use the output to update the second pull down menu.
Now comes the difficult part. I use the second drop down to insert their information. So the second pull down menu, could be be dozen of them, are all the same. I use a JS script to copy the table row of the form. Since an ID should be unique, these pull downs don't have an ID.
Is it still possible to update all of these 'second' pull down menu's on change of the first pull down menu? And if so, how is it possible?
The first pulldown that should trigger the update of the dropdowns below:
<select name="leverancier" id="leveranciers">
<option value="1">Supplier 1</option>
<option value="2">Supplier 2</option>
</select>
This part gets duplicated:
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
Thanks
Ralf
Give each secondary SELECT the same class.
Then, define an event handler on the primary SELECT that updates secondary SELECTs by targeting that class.
E.g.:
jQuery('#leveranciers').bind('change', function(event) {
// somehow determine the new set of options for all secondary SELECTs
jQuery('SELECT.secondary').each(function(i, e) {
jQuery(e).html(newOptionsMarkup);
});
return true;
});
(Please ignore the terrible .html()-based approach. The important piece is the way updates are targeted.)