web-dev-qa-db-ja.com

Angular ng-optionsの値を連結することは可能ですか？

基本的に、選択ボックスに値を入力しようとしていますが、first_name列とlast_name 行。

私がやりたいこと（うまくいかない）：

<select ng-model="buyers" ng-options="b.id as (b.first_name + " " + b.last_name) for b in buyers"></select>

動作するもの：

<select ng-model="buyers" ng-options="b.id as b.first_name for b in buyers"></select>
angularjsangularjs-ng-options
71
PatrickCurl

引用符は重要です。二重引用符内の二重引用符または単一引用符内の単一引用符では機能しません。

動作するもの：

<select ng-model="buyers" ng-options='b.id as (b.first_name + " " + b.last_name) for b in buyers'></select>
130
boatcoder

このsynthaxを使用して文字列を連結できます。

ng-options="i.x + ' ' + i.y for i in items"

次のスニペットは、firstnameとlastnameを連結します。

angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.names = [{firstname: 'Jon', lastname: 'Snow'},
                  {firstname: 'Rob', lastname: 'Stark'},
                  {firstname: 'Ned', lastname: 'Stark'}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="selected" ng-options="n.firstname + ' ' + n.lastname for n in names"></select>
  selected: {{selected}}
</div>

括弧は必須ではありませんが、可読性を改善する可能性があることに注意してください。

4
Mistalis