使用带有EJS的Angular在下拉列表中选择默认值(Select default value in a dropdown using Angular with EJS)

使用带有EJS的Angular在下拉列表中选择默认值(Select default value in a dropdown using Angular with EJS)

我在一个webapp中混合了EJS和Angular，但是现在我遇到了为下拉列表加载默认值 （select元素）的问题。 我使用相同的HTML文件来添加和更新用户。

我有一个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中的值验证Angular的值

<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传递所有城市值列表，以在HTML中使用EJS forEach命令。

谢谢！

I mixed EJS and Angular in a webapp, but now I'm having problems to load a default value for a dropdown (select element). I use the same HTML file to add and update users.

I have a URL that return all values loaded in the dropdown, accessed in the Angular controller when the page loads. This is the controller:

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

The EJS sends the default value via response (as in this example):

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

The HTML builds the dropdown with this code:

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

What I have 'unsuccessfully' tried so far (in the HTML):

To validate value from Angular with value from EJS

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

To insert a hidden input to hold the value in the HTML and inside the controller I added a JQuery

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

I know these attempts are ugly, but I could not find a way to make it work yet. I'll be happy if someone knows how to do it.

PS: I would like to avoid passing all the city list of values from NodeJS to use EJS forEach command inside the HTML.

Thank you!

最满意答案

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

Add this piece of code at the end of your .ejs template

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

then inject the component in your controller:

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; }); });

and change your HTML file to have the default value

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