我在一个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>更多推荐
发布评论