使用Angular與EJS在下拉列表中選擇默認值

我在Web應用程序中混合使用了EJS和Angular，但現在我在加載下拉列表（select元素）的默認值時遇到了問題。我使用相同的HTML文件來添加和更新用戶。使用Angular與EJS在下拉列表中選擇默認值

我有一個URL返回所有加載到下拉列表中的值，當頁面加載時在Angular控制器中訪問。這是控制器：

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

的EJS通過響應發送的默認值（如在這個例子中）：

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

的HTML建立與此代碼下拉：

<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>

到目前爲止我嘗試過的'失敗'（在HTML中）：

要從角與值從EJS

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

驗證值要插入隱藏的輸入在HTML保持值，並且控制器內我添加一個jQuery

<input type="hidden" id="defaultCity" value"<%=defaultCity%>" /> 

// In the controller (it return an error - this.each is not a function) 
$('city').val($('#defaultCity'))

我知道這些嘗試是醜陋的，但我找不到一種方法讓它工作。如果有人知道如何去做，我會很高興。 PS：我想避免通過NodeJS的所有城市列表值來使用EJS forEach命令在HTML中。

謝謝！

來源

2016-09-28 Tom

你.ejs模板的末尾添加這段代碼

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

再注入在你的控制器組件：

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>

來源

2016-09-28 13:58:19 Karim

使用Angular與EJS在下拉列表中選擇默認值

回答

相關問題