使用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在下拉列表中选择默认值

回答

相关问题