admin管理员组

文章数量:1026662

I am trying to create an array from an object in AngularJS to use for ui-bootstrap's typeahead.

I am able to pluck a single value out of the object ('Batman') but I need to be able to bine several properties to create a new array element ('Batman (Wayne, Bruce)). I tried $scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' ); but got all nulls.

Here is a plunker.

I need a final array that looks like this:

$scope.heroList = ['Batman (Wayne, Bruce]', 'Daredevil (Murdoch, Jack'), ... ];

Here is my javascript:

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

app.controller('MainController', function($scope){

  $scope.heroes = [
    {
      id: 1,
      name: 'Iron Man',
      fname: 'Tony',
      lname: 'Stark',
      location: 'Stark Tower',
      ic: 'Marvel'
    },
    {
      id: 2,
      name: 'Batman',
      fname: 'Bruce',
      lname: 'Wayne',
      location: 'Bat Cave',
      ic: 'DC'
    },
    {
      id: 3,
      name: 'Superman',
      fname: 'Clark',
      lname: 'Kent',
      location: 'Metroplis',
      ic: 'DC'
    },
    {
      id: 1,
      name: 'Daredevil',
      fname: 'Jack',
      lname: 'Murdock',
      location: 'Court Room',
      ic: 'Marvel'
    },
    {
      id: 5,
      name: 'Flash',
      fname: 'Barry',
      lname: 'Allen',
      location: 'Speedline',
      ic: 'DC'
    },
    {
      id: 6,
      name: 'Hulk',
      fname: 'Bruce',
      lname: 'Banner',
      location: 'Labratory',
      ic: 'Marvel'
    },
    {
      id: 7,
      name: 'Hawkeye',
      fname: 'Clint',
      lname: 'Barton',
      location: 'Nest',
      ic: 'Marvel'
    },
    {
      id: 8,
      name: 'Thor',
      fname: 'Donald',
      lname: 'Blake',
      location: 'Asgard',
      ic: 'Marvel'
    }
  ];

  $scope.heroList = _.pluck($scope.heroes, 'name');
  //$scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' );

}); // end MainController

I am trying to create an array from an object in AngularJS to use for ui-bootstrap's typeahead.

I am able to pluck a single value out of the object ('Batman') but I need to be able to bine several properties to create a new array element ('Batman (Wayne, Bruce)). I tried $scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' ); but got all nulls.

Here is a plunker.

I need a final array that looks like this:

$scope.heroList = ['Batman (Wayne, Bruce]', 'Daredevil (Murdoch, Jack'), ... ];

Here is my javascript:

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

app.controller('MainController', function($scope){

  $scope.heroes = [
    {
      id: 1,
      name: 'Iron Man',
      fname: 'Tony',
      lname: 'Stark',
      location: 'Stark Tower',
      ic: 'Marvel'
    },
    {
      id: 2,
      name: 'Batman',
      fname: 'Bruce',
      lname: 'Wayne',
      location: 'Bat Cave',
      ic: 'DC'
    },
    {
      id: 3,
      name: 'Superman',
      fname: 'Clark',
      lname: 'Kent',
      location: 'Metroplis',
      ic: 'DC'
    },
    {
      id: 1,
      name: 'Daredevil',
      fname: 'Jack',
      lname: 'Murdock',
      location: 'Court Room',
      ic: 'Marvel'
    },
    {
      id: 5,
      name: 'Flash',
      fname: 'Barry',
      lname: 'Allen',
      location: 'Speedline',
      ic: 'DC'
    },
    {
      id: 6,
      name: 'Hulk',
      fname: 'Bruce',
      lname: 'Banner',
      location: 'Labratory',
      ic: 'Marvel'
    },
    {
      id: 7,
      name: 'Hawkeye',
      fname: 'Clint',
      lname: 'Barton',
      location: 'Nest',
      ic: 'Marvel'
    },
    {
      id: 8,
      name: 'Thor',
      fname: 'Donald',
      lname: 'Blake',
      location: 'Asgard',
      ic: 'Marvel'
    }
  ];

  $scope.heroList = _.pluck($scope.heroes, 'name');
  //$scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' );

}); // end MainController
  • javascript
  • angularjs
  • lodash
Share Improve this question edited Aug 27, 2014 at 12:51 Satpal 133k13 gold badges167 silver badges170 bronze badges asked Aug 27, 2014 at 12:45 jgravoisjgravois 2,57910 gold badges44 silver badges67 bronze badges 1
  • I'd use collect/map for this instead of pluck as it's more canonical, IMO. – Dave Newton Commented Aug 27, 2014 at 12:52
Add a ment  | 

2 Answers 2

Reset to default 3

You can use callback method.

Use

$scope.heroList = _.pluck($scope.heroes, function(elm){
    return elm.name + '(' + elm.lname + ', ' + elm.fname + ')';
});

DEMO

Also I would remend you to use _.map()

$scope.heroList = _.map($scope.heroes, function(elm){
    return elm.name + '(' + elm.lname + ', ' + elm.fname + ')';
});

DEMO with map

Try using typeahead's "typeahead-input-formatter" artribute, you can pass a callback to it for formatting the final selected value

I am trying to create an array from an object in AngularJS to use for ui-bootstrap's typeahead.

I am able to pluck a single value out of the object ('Batman') but I need to be able to bine several properties to create a new array element ('Batman (Wayne, Bruce)). I tried $scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' ); but got all nulls.

Here is a plunker.

I need a final array that looks like this:

$scope.heroList = ['Batman (Wayne, Bruce]', 'Daredevil (Murdoch, Jack'), ... ];

Here is my javascript:

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

app.controller('MainController', function($scope){

  $scope.heroes = [
    {
      id: 1,
      name: 'Iron Man',
      fname: 'Tony',
      lname: 'Stark',
      location: 'Stark Tower',
      ic: 'Marvel'
    },
    {
      id: 2,
      name: 'Batman',
      fname: 'Bruce',
      lname: 'Wayne',
      location: 'Bat Cave',
      ic: 'DC'
    },
    {
      id: 3,
      name: 'Superman',
      fname: 'Clark',
      lname: 'Kent',
      location: 'Metroplis',
      ic: 'DC'
    },
    {
      id: 1,
      name: 'Daredevil',
      fname: 'Jack',
      lname: 'Murdock',
      location: 'Court Room',
      ic: 'Marvel'
    },
    {
      id: 5,
      name: 'Flash',
      fname: 'Barry',
      lname: 'Allen',
      location: 'Speedline',
      ic: 'DC'
    },
    {
      id: 6,
      name: 'Hulk',
      fname: 'Bruce',
      lname: 'Banner',
      location: 'Labratory',
      ic: 'Marvel'
    },
    {
      id: 7,
      name: 'Hawkeye',
      fname: 'Clint',
      lname: 'Barton',
      location: 'Nest',
      ic: 'Marvel'
    },
    {
      id: 8,
      name: 'Thor',
      fname: 'Donald',
      lname: 'Blake',
      location: 'Asgard',
      ic: 'Marvel'
    }
  ];

  $scope.heroList = _.pluck($scope.heroes, 'name');
  //$scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' );

}); // end MainController

I am trying to create an array from an object in AngularJS to use for ui-bootstrap's typeahead.

I am able to pluck a single value out of the object ('Batman') but I need to be able to bine several properties to create a new array element ('Batman (Wayne, Bruce)). I tried $scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' ); but got all nulls.

Here is a plunker.

I need a final array that looks like this:

$scope.heroList = ['Batman (Wayne, Bruce]', 'Daredevil (Murdoch, Jack'), ... ];

Here is my javascript:

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

app.controller('MainController', function($scope){

  $scope.heroes = [
    {
      id: 1,
      name: 'Iron Man',
      fname: 'Tony',
      lname: 'Stark',
      location: 'Stark Tower',
      ic: 'Marvel'
    },
    {
      id: 2,
      name: 'Batman',
      fname: 'Bruce',
      lname: 'Wayne',
      location: 'Bat Cave',
      ic: 'DC'
    },
    {
      id: 3,
      name: 'Superman',
      fname: 'Clark',
      lname: 'Kent',
      location: 'Metroplis',
      ic: 'DC'
    },
    {
      id: 1,
      name: 'Daredevil',
      fname: 'Jack',
      lname: 'Murdock',
      location: 'Court Room',
      ic: 'Marvel'
    },
    {
      id: 5,
      name: 'Flash',
      fname: 'Barry',
      lname: 'Allen',
      location: 'Speedline',
      ic: 'DC'
    },
    {
      id: 6,
      name: 'Hulk',
      fname: 'Bruce',
      lname: 'Banner',
      location: 'Labratory',
      ic: 'Marvel'
    },
    {
      id: 7,
      name: 'Hawkeye',
      fname: 'Clint',
      lname: 'Barton',
      location: 'Nest',
      ic: 'Marvel'
    },
    {
      id: 8,
      name: 'Thor',
      fname: 'Donald',
      lname: 'Blake',
      location: 'Asgard',
      ic: 'Marvel'
    }
  ];

  $scope.heroList = _.pluck($scope.heroes, 'name');
  //$scope.heroList = _.pluck($scope.heroes, 'name' + '(' + 'lname' + ', ' + 'fname' + ')' );

}); // end MainController
  • javascript
  • angularjs
  • lodash
Share Improve this question edited Aug 27, 2014 at 12:51 Satpal 133k13 gold badges167 silver badges170 bronze badges asked Aug 27, 2014 at 12:45 jgravoisjgravois 2,57910 gold badges44 silver badges67 bronze badges 1
  • I'd use collect/map for this instead of pluck as it's more canonical, IMO. – Dave Newton Commented Aug 27, 2014 at 12:52
Add a ment  | 

2 Answers 2

Reset to default 3

You can use callback method.

Use

$scope.heroList = _.pluck($scope.heroes, function(elm){
    return elm.name + '(' + elm.lname + ', ' + elm.fname + ')';
});

DEMO

Also I would remend you to use _.map()

$scope.heroList = _.map($scope.heroes, function(elm){
    return elm.name + '(' + elm.lname + ', ' + elm.fname + ')';
});

DEMO with map

Try using typeahead's "typeahead-input-formatter" artribute, you can pass a callback to it for formatting the final selected value

本文标签： javascriptPlucking Multiple PropertiesStack Overflow

版权声明：本文标题：javascript - Plucking Multiple Properties - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745650616a2161295.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。