Select 使用 AngularJS 和 EJS 的下拉列表中的默认值

Question

我在 Web 应用程序中混合了 EJS 和 AngularJS，但现在 我在为下拉菜单加载默认值时遇到问题（select元素）。我使用相同的 HTML 文件来添加和更新用户。

我有一个 URL return 所有值都加载到下拉列表中，页面加载时在 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>

到目前为止我已经'unsuccessfully'尝试过（在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 命令

谢谢！

Answer 1

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

Select 使用 AngularJS 和 EJS 的下拉列表中的默认值

Select default value in a dropdown using AngularJS with EJS

default-value

ejs

node.js

angularjs

dropdown