I wanted to pass everytime i select an item from a ui-select to the controller I did try to use ng-update and ng change but it does not seem to work. Any idea? why code is below. Thank you. I just want to trigger a function once i select an item from the ui select.
controller
$scope.update = function () {
alert("triggered")
}
view
<ui-select ng-change="update()" multiple="multiple" tagging="tagging" tagging-label="(custom 'new' label)" ng-model="main.record.skills" theme="bootstrap" sortable="true" style="width: 300px;" title="">
<ui-select-match class="ui-select-match" placeholder="Select skills">{$ $select.selected.name $}{$ $item.name | limitTo:70 $} {$ $item.name.length > 70 ? "..." : "" $}</ui-select-match >
<ui-select-choices ng-change="main.update()" refresh="main.read_skills($select.search)" repeat="skill in main.skills | filter:$select.search track by $index">
<div ng-bind-html="skill.name | highlight: $select.search"></div>
{$ name $}
</ui-select-choices>
</ui-select>
Add on-select="onSelected($item)" to your ui-select and in controller:
$scope.onSelected = function (selectedItem) {
//do selectedItem.PropertyName like
//selectedItem.Name or selectedItem.Key
//whatever property your list has.
}
Related
I am working with <ui-select> and came across a problem I apparently do not understand how to tackle. There is a bunch of related topics on it here on SO, however, none of them covered my specific problem, which is I think quite simple for people who have worked with this directive before.
I have a big object with item objects inside, like this one:
let items = [{id: 1, name: 'name'}, {id: 2, name: 'name2'}];
I am iterating over object to make it visible in front. The option will be displayed in
<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>
</ui-select-match>
The label will be selected in controller based on the "watched" value. My question here is what should I set in ng-model to watch the changes on the level of individual items and update it?
I tried to use track by index, ng-change instead of watch and a bunch of other approaches which brought no results.
Template:
<div ng-repeat="item in vm.items">
<div class="form-group field">
<label>Items:</label>
<ui-select ng-model="item.id"
ng-keyup="vm.newItems({ keyword: $select.search })"
search-enabled="false">
<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>
</ui-select-match>
<ui-select-choices repeat="item.id as item in vm.shortlistsList">
<pre>Name: {{ item.label }}</pre><pre>Id: {{ item.id }} </pre>
</ui-select-choices>
</ui-select>
</div>
In controller:
function $onChanges() {
$scope.$watch('item.id', function (newValue, oldValue) {
console.log(item.id);
});
}
QUESTION: How can I watch each individual item, what/how should I pass to ng-model? At the moment I see no way of doing it as my half day of attempts is gone in vain.
Following a long and painful day of experiments, I found a workable solution:
Template:
<div ng-repeat="item in vm.items track by $index">
<div class="form-group field">
<label>Items:</label>
<ui-select ng-model="item[$index]"
ng-keyup="vm.newItems({ keyword: $select.search })"
search-enabled="false">
<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>
</ui-select-match>
<ui-select-choices repeat="item.id as item in vm.shortlistsList">
<pre>Name: {{ item.label }}</pre><pre>Id: {{ item.id }} </pre>
</ui-select-choices>
</ui-select>
</div>
Controller:
for (let i = 0; i < vm.items.length; i++) {
$scope.$watch('vm.items[' + i + ']', function (newValue, oldValue) {
if (newValue && oldValue !== null) {
return newValue.label = newValue.name;
}
}, true);
}
I'm unable to access the selected dropdown value in UI-Select, How do I access the selected values in the controller?
<ui-select name="optionType" ng-model="optionType.selected" theme="bootstrap" append-to-body="true" reset-search-input="true">
<ui-select-match placeholder="Option">
<span ng-bind-html="ctrl.trustAsHtml($select.selected.type)"></span>
</ui-select-match>
<ui-select-choices repeat="option in optionTypes | filter: $select.search" position="down">
<span ng-bind-html="ctrl.trustAsHtml(option.type) | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
Controller:
$scope.optionType = {};
$scope.optionTypes =
[
{type: "Risk Reversal"},
{type: "Straddle"},
{type: "Strangle"},
{type: "Spread"},
{type: "VANILLA"}
]
Check their 'Object as source' example
You need to bind it to repeat like this:
<ui-select-choices repeat="item.type as item in optionTypes">
There I don't see a need of using ng-bind-html by looking at your dropwon collection. Although if you need it there make sure you have trustAsHtml function, inside your controller $scope and then use trustAsHtml(selected.type) instead of ctrl.trustAsHtml(selected.type).
Without ng-bind-html
<ui-select name="optionType" ng-model="optionType.selected" theme="bootstrap" append-to-body="true" reset-search-input="true">
<ui-select-match placeholder="Option">
<span ng-bind="$select.selected.type"></span>
</ui-select-match>
<ui-select-choices repeat="option in optionTypes | filter: $select.search" position="down">
<span ng-bind="option.type | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
Demo Here
In my template i have :
<div ng-if="$ctrl.show()">
<input class="form-control" type="text">
</div>
In my component
show() {
if (angular.isDefined(this.parking.parkingType)) {
return this.parking.parkingType.labelKey === 'parking_type.air'
}
}
I want angular to process the function only when clicking on a select input (ui-select) by the attribute on-select="$ctrl.show()" :
<ui-select ng-model="$ctrl.parking.parkingType"
on-select="$ctrl.show()">
<ui-select-match allow-clear="true">
<span>{{ $select.selected.label }}</span>
</ui-select-match>
<ui-select-choices repeat="item in $ctrl.parkingType | filter: { label: $select.search }">
<span ng-bind-html="item.label"></span>
</ui-select-choices>
</ui-select>
This case may be similar to a sample case of: launching the function only when clicking on an ng-click
change your ng-show to a variable and keep on-select="$ctrl.show()" as is
In your view:
<div ng-if="$ctrl.shouldShow">
<input class="form-control" type="text">
</div>
In your component:
$ctrl.show = function() {
if (angular.isDefined(this.parking.parkingType)) {
$ctrl.shouldShow = (this.parking.parkingType.labelKey === 'parking_type.air')
}
}
It's a good practice not to have a function in ng-if, ng-show, and ng-hide because it's a performance hit
Multiple select in Angular UI-Select not working. This is my example:
<ui-select multiple ng-model="params.filter()['manager']" class="form-control" reset-search-input="false">
<ui-select-match class="ui-select-match" allow-clear="true" placeholder="Manager">{{$select.selected.name }}</ui-select-match>
<ui-select-choices class="ui-select-choices" repeat="item.id as item in selectArray.managerArray | filter: $select.search "
refresh="refreshItem($select.search, 'UserGetSearch', 'managerArray')"
refresh-delay="0">
<div ng-bind-html="item.name"></div>
</ui-select-choices>
</ui-select>
I want to bind ui-select to <a></a> tag, so when we click on this tag, it show ui-select.
Please see the following demo Plunker DEMO
In demo, select-ui are shown separately, but I want to show it only when I click on following drop-downs (person, country), when I click on person It show the following ui-select. Similarly When I click on country it should show the ui-select for country.
It should be attach with the drop-down,
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
I modified the my pluncker DEMO as suggested by Naga Sandeep, but after selection of country, I am not able to select again person.
All you need to do is
1) toggle a property on scope
2) ng-show that property on ui-select.
Click for countries
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;" ng-show="showCountry">
In your js file toggle the property
$scope.showCountry = false;
$scope.toggleCountry = function()
{
$scope.showCountry = !$scope.showCountry;
}
i updated the plunker example : http://plnkr.co/edit/e64JGEakaKRVBgNwgpDg?p=preview
into controller, add isActive() function:
//that function checks if the ui-select is active
$scope.isActive = function(type){
return $scope.selectedType == type;
};
into HTML:
Just wrap your ui-select into <div></div> and check if they are active, like this :
<div ng-show="isActive('person')">
<h3>Select2 theme</h3>
<p>Selected: {{person.selected}}</p>
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
</div>
<div ng-show="isActive('country')">
<h3>Selectize theme</h3>
<p>Selected: {{country.selected}}</p>
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in countries | filter: $select.search">
<span ng-bind-html="country.name | highlight: $select.search"></span>
<small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
Hope helps , good luck.