드롭 다운 목록에서 옵션을 선택하는 방법 angularjs

Question

AngularJS 지시문을 사용하고 있으며 내 템플릿에서 드롭 다운 목록의 선택된 옵션을 설정해야합니다.

<select id="energySource" ng-options="o.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select> 

옵션 목록의 내용은 페이지로드시 서버가 보내는 리소스에 따라 다릅니다.

var energyChosen = "All"; 


     angular.element(document).ready(function() { 

      $.get('/Dashboard/GetResources', function (data) { 

       scope.Resources = data; 

       scope.energyOptions = [{ name: scope.Resources.Electricity, id: "Electricity" }, { name: scope.Resources.Gas, id: "Gas" }, 
       { name: scope.Resources.Water, id: "Water" }, { name: scope.Resources.Solar, id: "Solar" }]; 

       scope.energy = scope.energyOptions[0]; 
       energyChosen = scope.energy.id; 

       scope.$apply(); 

      }); 

그것은 빈 옵션은 내가 옵션 을 선택했을 때 나는 하나의 옵션을 미리 선택할 수 있도록하고 싶습니다 사라지는 미리 선택된 것을 제외하고 작동합니다. 나는 그 생각했다

트릭을 할 것이라고 생각했지만 그렇지 않았다. 이 경우 옵션을 어떻게 미리 선택할 수 있습니까?

Answer 1

scope.energy가 초기화 외부에 있는지 확인하십시오.

$scope.energyOptions = [ 
    { name: "test1", id: "Electricity" }, 
    { name: "test2", id: "Gas" }, 
    { name: "test3", id: "Water" }, 
    { name: "test4", id: "Solar" }]; 
    $scope.energy = $scope.energyOptions[2]; 

Answer 2

당신이 당신의 ng-options이 scope.energy에 옵션의 이름을 저장하지 않습니다 전체 옵션을하고있는 방법입니다. 당신이 한 때 바른 길에 있었다 :

scope.energy = scope.energyOptions[0]; 

을하지만 scope.energy는 이름이 아닌 전체 옵션이 될 것으로 기대하고 있기 때문에 작동하지 않습니다.

<select id="energySource" ng-options="o as on.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select> 

중요한 변경 o as o.name의 추가이다 : 당신이 당신의 ng-options에하고 싶은 것은 같은 것이있다. 왼쪽의 'o'는 실제로 scope.energy에 선택되고 저장되며, as o.name은 풀다운에 표시 될 텍스트입니다.