CODEWITHSUNDEEP
javascriptjqueryangularjs
Tipster74743
Tipster74743

Reputation: 23

How to add spaces to text when using .text()

I'm using a combo of angularJS and jQuery working with the tooltip widget and a drop-down menu.

We're grabbing a bunch of names that come into a multi-select, and when I select several items from the drop down I'm pulling the text to get the labels (since the items are coming from a database, the value doesn't work, it just shows the numbers)

So right now I'm working with 

$scope.selected = $('#filter option:selected').text();

If I select: 'red, blue, green' it's being displaced as redbluegreen.

Is there anyway I can keep the spaces using .text()? I've searched the site and can't find anything relevant.

Upvotes: 0

Views: 81

Answers (3)

charlietfl
charlietfl

Reputation: 171669

Since jQuery really has no business being used in a controller, here's a more appropriate angular solution that will update in real time using ng-change

HTML

<select multiple 
        ng-model="mySelect" 
        ng-options="opt.id as opt.val for opt in options" 
        ng-change="updateSelected()">
</select>

Controller

  var options = [
    {id: 1,val: 'item 1'}, 
    ..........
    {id: 6,val: 'item 6'}
  ];

  /* used in "ng-change" on select*/
  function updateSelected() {
    // map text from options
    $scope.selected = $scope.options.map(function(option) {
      return $scope.mySelect.indexOf(option.id) > -1 ? option.val : null
    }).join(' ');
  }

  // scope object
  var scope = {
    mySelect: [1, 3, 4], // ng-model for select
    selected : null,// space separated text variable
    updateSelected: updateSelected,
    options: options // options for select
  }
  // extend $scope with scope object
  angular.extend($scope, scope);
  // create initial options text
  $scope.updateSelected();

DEMO

Upvotes: 0

Kremlan
Kremlan

Reputation: 310

$scope.selected = $('#filter option:selected').map(function() {
    return $(this).text();
}).get().join(' ');

http://api.jquery.com/jquery.map/

Upvotes: 3

Italo Ayres
Italo Ayres

Reputation: 2663

Try something like: 

var selected = []; 
$('#filter :selected').each(function(i, selected){ 
     selected.push($(selected).text()); 
});

Upvotes: 0

Related Questions