So I have a pretty basic select that looks like this:
<ui-select theme="select2" search-enabled="false" ng-model="obj.myModel">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item.value as item in choices">
<span>
{{item.name}}
</span>
</ui-select-choices>
</ui-select>
Let's say the choices are defined as
$scope.choices = [
{value: 'some_value_1', name: 'Default name'},
{value: 'some_value_2', name: 'Default name 2'}
]
Now let's assume that the user has selected the item with value some_value_1. After that a server response comes in that updates the choices list with different names
$scope.choices = [
{value: 'some_value_1', name: 'Real name'},
{value: 'some_value_2', name: 'Real name 2'}
]
Notice that the value part that is saved in the model stays the same. The name in <ui-select> is still Default name when I would want it to change to Real name.
plnkr.co
Is there a way to make the selected name correspond to updated choices?
Related
I have an super big array similar to this:
$scope.providers = [{
providerName: 'John Doe',
colors: 1,
itemQuantity: 100,
item: 'pen',
price: 2,5
},
{
providerName: 'John Doe',
colors: 1,
itemQuantity: 200,
item: 'pen',
price: 2
},
providerName: 'John Doe',
colors: 3,
itemQuantity: 400,
item: 'clock',
price: 10
},
providerName: 'Jane Doe',
colors: 1,
itemQuantity: 50,
item: 'bag',
price: 15
}]
Im building a proposal maker, so I need our business employees to select which provider option they'll be using. (For you to understand these providers just put a logo on our items, and that array of objects is really a list of the prices they charge by quantity of colors, type of item and quantity of items)
The thing is, I want to create a select input with options to first choose which provider we will be using, let's say we settle with John Doe. Then I want a select input to choose the quantity of colors, but will only offer those that John Doe offers. Then I need another input which will let me choose the type of items that John Doe works for that quantity of colors... and so on
Finally I'd like to get the price for all that options
I'm getting quite lost on how to build this on angularjs (version 1.5.8)
Also something tells me I should order my data in a better way than that huge array.
Any suggestion on both issues?
Thanks!
Basically you set it up to have the comboboxes be based off the previous ones (excuse the silly html, it was for demo purposes):
Working Plnkr
<body ng-controller="MainCtrl">
Provider:
<select ng-model="selectedProvider" ng-options="p.providerName as p.providerName for p in providers | unique:'providerName'">{{p}} </select>
<br/>
Selected Provider: {{selectedProvider}}
<br/>
<br/>
Number of Colors:
<select ng-model="selectedNumber" ng-options="n.colors as n.colors for n in providers | filter : {providerName:selectedProvider } | unique:'colors' "> </select>
<br/>
Selected Number: {{selectedNumber}}
<br/>
<br/>
Items:
<select ng-model="selectedItem" ng-options="i.item as i.item for i in providers | unique:'item' | filter : {providerName:selectedProvider, colors: selectedNumber}"> </select>
<br/>
Selected Item: {{selectedItem}}
<br/>
Distinct Prices:
<div ng-repeat="p in providers | filter : {providerName:selectedProvider, colors: selectedNumber, item: selectedItem}">
<span>{{p.price}}</span>
</div>
You'll have to make sure you include 'angular.filter' dependency and the .js file at the top of the plnkr. You may also have to make sure the filtering matches whole words, and not just parts, but this should be more than enough to get you started.
I have dropdown in which options are coming from array using ng-repeat. It is working as normal drop-down. But I want in a different way. If one option is selected, it should be disabled in the other dropdowns. can we do like that in angular? I have some code already in plunker. But the problem is if we select one option and if we change that we are not able to select the previous option. That means, If we are selecting "Florida" in the first dropdown and "california" in second dropdown , then if we change the first drop down value to "Delaware", then we are not able to select all the three options in the dropdown.
Html code is:
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="address in addresses">
Billing State:
<select
ng-model="address.state"
ng-options="state.lookupCode as state.description for state in lov_state"></select>
<tt>State selected: {{address.state}}</tt>
</div>
</div>
controller code is :
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.addresses = [
{'state': 'AL'},
{'state': 'CA'},
{'state': 'FL'}
];
$scope.lov_state = [
{'lookupCode': 'AL', 'description': 'Alabama'},
{'lookupCode': 'FL', 'description': 'Florida'},
{'lookupCode': 'CA', 'description': 'California'},
{'lookupCode': 'DE', 'description': 'Delaware'}
];
});
Demo Here
I'm trying to perform an orderBy operation in AngularJS based on a chosen select box value.
The problem I'm having is changing the optional :true or :false flags depending on the selected value.
For example, 'alphabetical' order, the flag would have to be :false, but for 'date' (most recent), the flag needs to be :true.
I've tried hardcoding the flags in the scope options but still not working.
html
<div>
<label>Country filter</label>
<input type="text" ng-model="countryFilter" />
<label>Order by</label>
<select ng-model="selectedOrder" ng-options="option for option in options"></select>
</div>
<ul>
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>
</ul>
app.js
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope) {
// order by options
$scope.options = ['country', 'address', 'date'];
// all countries
$scope.details = [{
id:1, country:'Finland', address:'Mainstreet 2', date:'2015-05-02'
},{
id:2, country:'Mexico', address:'Some address', date:'2015-05-05'
},{
id:3, country:'Canada', address:'Snowroad 45', date:'2015-03-02'
}];
});
Here is a plunker.
I would suggest to change your order options from strings to objects, which include the information if the list should be reversed for this order:
$scope.options = [{value : 'country', reversed : false}, {value : 'address', reversed : false}, {value : 'date', reversed : true}];
And the ng-repeat to:
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder.value:selectedOrder.reversed">{{ detail }}</li>
http://plnkr.co/edit/JXtHa2jXUy7Y5BsvsdL9?p=preview
I have a DoJo FilteringSelect created from <select>.
How I can make one (not selected) option as disabled dynamically?
Thanks
UPD: is it possible to REMOVE this element when FilteringSelect was created by PARSE?
Looks like there's a "disabled" attribute on __SelectOption. When you pass in options, try setting "disabled" to true.
new dijit.form.Select({
id: 's2',
options: [
{label: 'this is disabled', value: 1, disabled:true},
{label: 'this is enabled', value: 1}
]
}
See http://jsfiddle.net/ur87d/
Edit: You said dynamically... So you'll want to use updateOption or removeOption.
dojo.ready(function() {
var s2 = new dijit.form.Select({
id: 's2',
options: [{label: 'one', value: 1},{label: 'two', value: 2}]
});
s2.updateOption({label: 'one-updated', value: 1, disabled: true});
s2.placeAt(dojo.body());
});
See http://jsfiddle.net/ur87d/1/
It's not easy to make option disabled, but it's easy to make it invisible.
Bind your FilterSelect to an ItemFileWriteStore. The options are from items in the store.
You can dynamically add/remove items from the store.
So that your disabled options will not appear in the drop down.
Fiddle: http://jsfiddle.net/tdRCB/3/
I have an observableArray in my viewModel named filterInfo.
I have many html-controls to create filters (inputs, selects, etc)
What is the best way to get filterInfo containing all values in my html controls?
For example:
I have in input value 123 and in select value 1, so I need, that my filterArray contains two elements:
[{field: 'title', value: '123'}, {field: 'type', value: 1}]
If my input is empty and I selected in dropdown list only second element, resulting array will be:
[{field: 'type', value: 2}]
Thanks
I have written sample for your example.
http://jsfiddle.net/ivanov_vitaly/tdRCB/6/