2017-01-08 12 views
0

<select> 요소를 스코프의 일부 옵션으로 미리 채워야하고 처음 선택 될 모델로 하나의 whos 값이 바인딩되기를 바랍니다.ng-options를 모델 값으로 초기화하십시오.

문제는 모델 값이 선택되지 않고 빈 요소가 만들어지고 선택된다는 것입니다.

JSON 모델

var fruits = { 
    "0":"apple", 
    "1":"pear", 
    "2":"banana" 
} 

컨트롤러

$scope.items = fruits; 
$scope.myfruit = 1; // also tried "1" 

템플릿 마크 업 :

<select class='form-control' name="fruit" 
    ng-model="myfruit"    
    ng-options="key as val for (key, val) in items" >      
</select> 

드롭 다운 나 nu는 모든 값을 렌더링하고 의도 한대로 키로 모델을 업데이트하지만 첫 번째 요소는 선택된 빈 항목입니다.

그러나 옵션을 선택하면 빈 옵션이 사라집니다.

은 또한 동일한 결과를 ng-repeat를 사용하여 마크 업을 작성하려고 :

<select class='form-control' name="fruit" 
    ng-model="myfruit" > 
    <option ng-repeat="(k, val) in items" value="{{k}}">{{val}}</option>       
</select> 
초기화 할 때

이 모델에 표시된 값을 선택하는 방법 내가 얻을 수있는 ?

+1

그것은 나를 위해 일하고 :'$ scope.myfruit = '1'' –

+0

예 아. 효과가있었습니다. 내 모델을 문자열로 변환해야 할 것 같아. – yevg

답변

1

귀하의 옵션 값은 문자열입니다

이게 작동합니다.

$scope.myfruit = "1"; 

확인 아래 작업 예를

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

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

 
    var fruits = { 
 
    "0": "apple", 
 
    "1": "pear", 
 
    "2": "banana" 
 
    } 
 

 
    $scope.items = fruits; 
 
    $scope.myfruit = "1"; 
 

 

 
});
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    
 
    <select class='form-control capitalize' name="cost" 
 
    ng-model="myfruit"    
 
    ng-options="key as val for (key, val) in items" >      
 
    </select> 
 
    
 
    
 
    </body> 
 

 
</html>