Question

我在网络应用程序中混合了EJS和Angular，但现在我在下拉列表中加载默认值时出现问题（选择元素）。我使用相同的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>

我所拥有的＆＃39;失败了＆＃39;到目前为止（在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>

使用带有EJS的Angular在下拉列表中选择默认值

1 个答案: