I have data coming from third party system, that makes up a AngularJS select.
The data may build one or more select.
I can count the number of select (y) it can build select dynamically but select does behaves in weird way when I select options
<td ng-repeat="y in numCols track by $index" ng-init="myText='ChoiceCAP'+$index;myText2='ChoiceFO'+$index">
<select ng-model="mydata[myText]" >
<option selected value="mydata[myText]" > {{mydata[myText]}} </option> <option value="mydata[myText2]" > {{mydata[myText2]}}</option>
</select>
</td>
Here is the data I receive: it can be one or more of the ChoiceCAP and ChoiceFO and do not have preset number of values.
{"ChoiceCAP0":"Jonny","ChoiceFO0":"Mini","ChoiceCAP1":"Mini","ChoiceFO1":"Jonny","ChoiceCAP2":"Jonny","ChoiceFO2":"Mini"}
The problem was with the model , Took care of it with a different scope variable that fixed the issue
Related
I have nested data objects that I want to show to a user based on the filters they have selected. I am a bit new to angular but finding how to solve this problem has taken me a while now and not really got anything good.
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
I have check boxes on the top of the page and when you check or uncheck them the drop downs get updated with the filtered data.
Problem is that the SELECTED drop down is random, usually the first one that was selected on initial render.
I just want the cheapest value to be shown in the drop downs and the way the data is sorted that is always going to be the first select option.
How do I set the drop down selected value, for each nested repeat to be either the cheapest one or just simply the always the first drop down??
You can try to use the NgOption directive instead:
<div class="col col-50">
<span>Orientation</span> <br>
<select name="orientation" id="orientation" ng-options="option.label for option in data.filters.basics.orientations track by option.id" ng-model="data.selectedOrientation">
</select>
</div>
In my case the data.selectedOrientation is the default ng-model that i had to setup in the controller:
$scope.data.selectedOrientation = $scope.data.filters.basics.orientations[($scope.data.selections.basics.orientations[0]-1)]
If you dont want to change your dom element jsut add a ng-model to it
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter" ng-modal="yourModelForThisDom"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
After learning a bit more I finally realised that it will be much easier if all the data is stored and filtered on the Model and collections within.
<select class="form-control" ng-show="stockItem.supplierStockFiltered.length > 0"
ng-model="stockItem.selectedSupplier"
ng-options="option as getSupplierDropDownText(option) for option in stockItem.supplierStockFiltered track by option.price"></select>
<span ng-show="stockItem.supplierStockFiltered.length == 0 || stockPackItem.supplierStockFiltered == null ">
No Stock
</span>
So when the data loads or when ever I click on any check boxes, I just use angular.forEach( in the controller to set the Selected Item based on what ever I filtered out. The actual two fields I am binding too are not contained int he the data that comes back from the server. But in JS you can just dynamically add those fields before the HTML binds and it works great!
The HTML is much cleaner and I have much better control over the models.
End of the day I had to go do this any way because now I need to save all the selected drop down values... and now because the Selected item is bound to the model.. its easy peasy. I just serialise the models and use the data on the server.
I have list of records where in each record contains dropdown.
For each record I want the select box value to be selected on page load depending upon what value as saved. Currently in example I have created two arrays, one containing various price list and other array object containing all saved data. I want the price to be kept selected for each record in select box depending upon what price is saved in second array currently.
You can use ng-init as follows:
<select ng-init="Price=Item.Price" ng-model="Price" ng-options="option.Price as option.Price for option in Prices">
But, remove the track by to accomplish this.
As you asked in comments:
<select ng-model="Price">
<option ng-repeat="option in Prices" ng-selected="{{ option.a == Price }}" value="{{ option.price }}">
{{ option.price }}
</option>
</select>
In controller:
$scope.Price = 100;
I have different <select> in a ng-repeat div.
What I want is to avoid users select several times a same option.
I used the filter like this :
<div ng-repeat="customer in datas.customers">
<select ng-model="customer.attributeId" ng-change="updateCustomer(customer)">
<option ng-repeat="attribute in datas.attributes | filter:filterByAttributeNotUsed(customer)" value="{{attribute.id}}">{{attribute.name}}</option>
</select>
</div>
The filter works like I want (I tested it separately). But the result is not good.
When the filter is active, options in different select have to show only "free" attributes (it means, attributes which are not yet selected).
Here is a Demo which is more explicit I suppose.
Yo everyone,
I've got a little blocking on a work with AngularJS. I want to filter one sentence with two differents filters based on <select> <option>
Theme 1:
<select size="2" multiple="multiple" ng-model="selectedValue">
<option value="value1">value1.1</option>
<option value="value1">value1.2</option>
<option value="value1">value1.3</option>
</select>
Theme 2:
<select size="2" multiple="multiple" ng-model="selectedValue">
<option value="value1">value2.1</option>
<option value="value1">value2.2</option>
<option value="value1">value2.3</option>
</select>
And here you can see my ng:repeat
<table ng-init="allValue = <?php echo htmlspecialchars(json_encode($table)); ?>;">
<tr ng-repeat="value in allValue | filterMultiple:{valueCheck:selectedValue}">
<td>
<font class="title_recette">{{value.name}}</font>
<br>
{{value.valueCheck}}
{{value.valueTime}}
</td>
</tr>
During my search, I found this link : How to filter multiple values (OR operation) in angularJS which explain how filterMultiple works but which works with 3 differents selects on 3 differents values.
So. my "valueCheck" has sentences with some words and I want that it's possible to filtered these with Theme 1 + Theme 2. Currently, when I filter with one, I can't with the other. I can accumulate filters on themselves but not with the other.
EXEMPLE
Theme 1 option : Day, Month, Year
Theme 2 option : Happy, Sad, Tired
Sentences : One day I was happy, An other day I was sad, Work a full month is tiring
when I select Day + Year + Sad, I want to have :
- One day I was happy- An other day I was sad
Currently if I pick in order : Day + Year + Sad, only Sad will be take for the filter and so, only
- An other day I was sad
will be return.
Thanks in advance for any helps.
You have two drodowns and both are set to same ng-model.i.e ng-model="selectedValue". So value gets overwritten. You need to set separate ng-model for those two drop downs.
First of all, you should not bind 2 different selects with the same model (the ones you've mentioned as Theme 1 and Theme 2).
Then probably you should take a look on using ngOption instead of simply writing down the options yourself, the way angular manages the model being populated from html source (instead of scope defined one, or in an ng-init stance) is tricky and not always do what it supposed to do. In the end it's a mainly javascript-driven-html not the way around.
As for the filter you can simply pipe filter into another filter:
Something like this:
<tr ng-repeat="value in allValues | filter:sel1Value | filter:sel2Value"> ... </tr>
refer general angular filter functionality page for further information.
I have a list of filtered data:
<tr ng-repeat="course in courses | filter:search:true">
<td>
<div>{{course.course_name}}</div>
</td>
</tr>
and a SELECT input to help filter it:
<select ng-model="search.location_id">
<option value="">Location</option>
<option ng-repeat="course in courses" value="{{course.location_id}}>{{course.location}}</option>
</select>
Everything works great when switching between course locations to filter the data. My problem is that when I want to show ALL of the data and return to the default SELECT option (value=""), the data is gone and interprets it as nothing matching instead of unsetting the filter.
I realize that if I use search:false, it will work as intended, but I need this parameter as true and I also need a way to reset the filter.
You should use ng-options inside your select statement. You can leave the single <option> with value="" in there though. If you select the default option, the value of search.location_id will be null, which should be exactly what you need.
<select ng-model="search.location_id" ng-options="course.location for course in courses">
<option value="">Location</option>
</select>
Demo on Plunker.