I have a filter list using a select tag. I want to be able to filter the array based on the option selected. I have tried using v-model as this works with checkboxes but unfortunately doesn't work with select fields.
Any help would be amazing.
Please find my fiddle attached
<div id="app">
Selected: {{concatenated}}
<select>
<option v-for="item in vals" :select="item.selected">{{item.value}}</option>
</select>
<!--
<div v-for="item in vals">
<p>
<input type="checkbox" v-model="item.selected">{{item.value}}
</p>
</div>
-->
</div>
https://jsfiddle.net/39jb3fzw/2/
You should take a look at the docs and how they do databinding with select.
https://jsfiddle.net/s3x096u3/1/
<select v-model="selected">
<option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
</select>
With regards to your code, a select attribute on an option element doesn't do anything.
Related
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
So here is the deal, im getting different objects from ajax request ($scope.productos - $scope.ofertas) and then using ng-foreach for both to show them so user can select multiple items (stored in $pedidoForm.productos and
pedidoForm.ofertas) and this selected items dinamically show up below with another ng-repeat showing the 'nombre' property and adding another new property and value with input but the atribute VALUE is automatically converting any object into a string, resulting in a "{property: value}" so i cant read the property correctly
<div class="row">
<span>Productos</span>
<select class="selectpicker" ng-model="pedidoForm.productos" ng-change=parse(pedidoForm.productos) multiple>
<option ng-repeat="producto in productos" value="{{producto}}"> {{producto.nombre}}
</option>
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker" ng-model="pedidoForm.ofertas" ng-change="test(pedidoForm)" multiple>
<option ng-repeat="oferta in ofertas" value="{{oferta}}"> {{oferta.nombre}} </option>
</select>
</div>
as I understand you need to select an object, but HTML5 select tag supports only string values. So, try to use ng-options directive:
<div class="row">
<span>Productos</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.productos"
ng-change="parse(pedidoForm.productos)"
ng-options="producto as producto.nombre for producto in productos track by producto.nombre">
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.ofertas"
ng-change="test(pedidoForm)"
ng-options="oferta as oferta.nombre for oferta in ofertas track by oferta.nombre">
</select>
</div>
plunker: http://plnkr.co/edit/jl1cayWXif7fukQRviTw?p=preview
This Is my select tag. i want to make this As editable.
if possible change this as Input text.
here my ng-model is object showing as list.productcode.
<select class="default form-control" ng-options="list.productcode for list in getproductList" ng-model="list"></select>
please help how to change this.
This may help you
datalist
is the html5 tag
<input type="search" ng-model="txtModel" list="list" />
<datalist id="list" ng-model="list">
<option data-ng-repeat="data in list" value="{{data.ColumnName}}">
</option>
</datalist>
Note ColumnName is the Name of Column you can use
I have an array of objects that I bind to the scope. My view then accesses the objects via ng-options like this:
<div class="tile block box-shadow">
<form role="form">
<div class="form-group">
<label>Reason for change</label>
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" />
</div>
</form>
</div>
but the dropdown has nothing when you select it.
I have logged the priceChangeReasons and can see that the array is working and returning values.
I have made a codepen to show the issue:
http://codepen.io/r3plica/pen/XbQzMa?editors=101
I realise this is probably a syntax error on my part, but I can't see it.
Can someone help?
ngOptions directive requires ngModel, just add:
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" ng-model="controller.reason" />
and all should work
Hi I am trying to display certain values based on option selected in a drop down.
My code is
data is
[{"city":"New York","location":"123"},
{"city":"Chicago","location":"953"}
{"city":"New York","location":"788"}
{"city":"Chicago","location":"853"}]
Code is
<form name="test" class="form-horizontal">
<div class="from-group container">
<label for="abc" class="col-sm-2">City</label>
<div class="col-sm-10">
<select class="form-control" ng-model="cc">
<option ng-repeat="city in cities" value="city.value">{{city.name}}</option>
</select>
</div>
<ul>
<li ng-repeat="att in cities">{{att.locations | filter:cc}} ></li>
</ul>
</div>
</form>
With above code I have two problems.
1. As I select different options in the drop down it wont filter for that city name.
2. When the file is first loaded it will display all the locations
Please let me know how to fix this code so when I select an option it lists all the locations filtering based on the city name.
Thanks
angular has a really cool feature where you can filter directly in your ng-repeat.
I've set up a fiddle where you can see this in action. Basically you set an object (cc) based on the select and then use:
<div ng-repeat="city in data | filter:cc">
Hope this helped.