EJS로 각도를 사용하여 드롭 다운에서 기본값 선택

Question

webapp에서 EJS와 Angular를 섞어 쓰지 만 지금은 입니다. 드롭 다운의 기본값을로드하는 데 문제가 있습니다 (요소 선택). 동일한 HTML 파일을 사용하여 사용자를 추가하고 업데이트합니다.

페이지가로드 될 때 각도 조절기에서 액세스되는 드롭 다운에로드 된 모든 값을 반환하는 URL이 있습니다.

angular.module('app').controller('userCtrl', function($scope, $http) { 
     ... 
     function getCities() { 
      $http.get('/rest/cities').then(function(response) { 
      vm.cities = response.data.records; 
     }); 
    } 

EJS (이 예에서와 같이) 응답을 통해 상기 디폴트 값을 전송 :

<select id="city" name="city" class="form-control input-sm" required> 
     <option></option> 
     <option ng-repeat="x in cities" value="{{x.idCidade}}"> {{ x.Nome }} </option> 
    </select> 

:

router.get('/user', function(req, res) { 
     res.render('pages/user', { defatultCity: 10 }); 
    } 

는 HTML이 코드 드롭 빌드 이것은 컨트롤러

내가 '실패한'시도 (HTML) :

1. 은 HTML의 값을 유지하도록 숨겨진 입력을 삽입하려면 EJS

   <option ng-repeat="x in cities" value="{{x.idCity}}" <%if (defaultCity == %> {{x.idCity}} <%) {%> selected <%}%> > {{ x.Nome }} </option> 
   

2. 로부터 값에서의 각도에서의 값을 확인하고 제어기 내부 I는 JQuery와

   <input type="hidden" id="defaultCity" value"<%=defaultCity%>" /> 
   
   // In the controller (it return an error - this.each is not a function) 
   $('city').val($('#defaultCity')) 
   

추가

나는이 시도가 못 생겼다는 것을 알고 있지만 아직 제대로 작동하지는 못한다. 누군가 그것을 어떻게하는지 안다면 나는 행복 할 것이다.

추 신 : NodeJS의 모든 도시 값 목록을 전달하여 EJS forEach 명령을 HTML 내에서 사용하지 않도록하십시오.

감사합니다.

Answer 1

<script type="text/javascript"> 
     angular.module('app') 
     .value('myCity', <%- JSON.stringify(defaultCity) %>); 
</script> 

다음 컨트롤러에서 구성 요소 삽입하여 .ejs 템플릿의 끝 부분에이 코드 조각을 추가 : 기본 값을 갖도록

app.controller('myCtrl', function ($scope, myCity) { 

    function getCities() { 
     $http.get('/rest/cities').then(function(response) { 
     vm.cities = response.data.records; 

     // myCity must be an object - same as vm.cities[0], for example 
     $scope.defaultCity = myCity; 
    }); 

}); 

을하고 HTML 파일을 변경

<select ng-model="defaultCity" 
    ng-options="city as city.name for city in cities track by city.id" 
    id="city" name="city" class="form-control input-sm" required > 
    <option></option> 
</select>