Angular Select 2顯示國家與各自的國家下拉菜單

Question

我有國家的select2下拉菜單。我得到了數組和數據的兩個鍵的連接，但無法使用文本獲得國旗。 我的代碼如下

角的js

$scope.select2Config = { 
     formatResult: $scope.format, 
     formatSelection: $scope.format 
    }; 
    $scope.myForm = {}; 
    $scope.myForm.country = [ 
     {id: "IN", name: "INDIA"}, 
     {id: "USA", name: "USA"}, 
     {id: "UK", name: "United Kingdom"} 
    ]; 

    $scope.genName = function (id, name) { 
     return id + ' ' + name; 
    } 

HTML代碼：

<select ng-model="myForm.country" 
    ng-options="obj.id as genName(obj.id,obj.name) for obj in myForm.options"> 
<option value="">Select...</option></select> 

如何我都在我所選的選項得到的圖像和文本？ 我已經看到在javascript中的1個選項，你可以參考它 http://jsfiddle.net/Starx/sgb4888k/2/

Answer 1

我想你是設置ng-model作爲源數組。

angular.module('myApp', []) 
 
    .controller('myCtrl', function($scope) { 
 

 

 
    $scope.select2Config = { 
 
     formatResult: $scope.format, 
 
     formatSelection: $scope.format 
 
    }; 
 
    $scope.myForm = {}; 
 
    $scope.selectedId = ''; 
 
    $scope.myForm.country = [{ 
 
     id: "IN", 
 
     name: "INDIA" 
 
    }, { 
 
     id: "USA", 
 
     name: "USA" 
 
    }, { 
 
     id: "UK", 
 
     name: "United Kingdom" 
 
    }]; 
 

 
    $scope.genName = function(id, name) { 
 
     return id + ' ' + name; 
 
    } 
 

 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='myApp' data-ng-controller="myCtrl"> 
 

 
    <select ng-model="selectedId" ng-options="obj.id as genName(obj.id,obj.name) for obj in myForm.country"> 
 
    <option value="">Select...</option> 
 
    </select> 
 
    Selected {{selectedId}} 
 

 
</div>