How can I get all the selected values in a ui-select multiple in angular

Question

I have the following ui-select code in angular and I want to get all the selected values in order to put them in a string. THe selection works well I can choose the product but I cannot get which values I have selected

<ui-select multiple ng-model="multipleDemo.selectedProducts" theme="bootstrap" ng-disabled="disabled">
                  <ui-select-match class="ui-select-match" placeholder="Επιλογή προϊόντος...">{{$item.name}}</ui-select-match>
                  <ui-select-choices class="ui-select-choices" repeat="product in products | propsFilter: {name: $select.search}">
                    <div ng-bind-html="product.name | highlight: $select.search"></div>
                  </ui-select-choices>
                </ui-select>

In the controller I have

$scope.multipleDemo = {};
$scope.multipleDemo.selectedProducts = [];

If I write a div like this

 </div>
                <div>{{multipleDemo.selectedProducts}}</div>
            </div>

then I do not see anynthing in this div. Could anyone help with this?

Anyone to know something about this? – vagelis Oct 09 '16 at 16:36 — vagelis, Oct 09 '16 at 16:36

score 1 · Accepted Answer · answered Oct 20 '16 at 08:16

I've created this Fiddle based on the code in your question which seems to work. I can't spot anything obvious wrong with your code though.

The controller is as follows:

app.controller("myCtrl", function($scope) {  
  $scope.products = [
    {id:1, name:'Apple'},
    {id:2, name:'Banana'},
    {id:3, name:'Carrot'}
  ];

  $scope.multipleDemo = {};
  $scope.multipleDemo.selectedProducts = [];
});

and the HTML:

<div ng-app="app" ng-controller="myCtrl">
  <ui-select multiple ng-model="multipleDemo.selectedProducts" theme="bootstrap" ng-disabled="disabled">
    <ui-select-match class="ui-select-match" placeholder="Επιλογή προϊόντος...">{{$item.name}}</ui-select-match>
     <ui-select-choices class="ui-select-choices" repeat="product in products | propsFilter: {name: $select.search}">
      <div ng-bind-html="product.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
  <div>
    Selected: {{multipleDemo.selectedProducts}}
  </div>
</div>

Additionally I had to define a propsFilter on the module:

app.filter('propsFilter', function() {
  ...
});

and ensure ngSanitize was included as a dependency:

var app = angular.module('app', ['ui.select', 'ngSanitize']);

How can I get all the selected values in a ui-select multiple in angular

1 Answers1