Question

我正在制作一个symfony2表单，其中有两个下拉列表。现在我需要以下功能 - ＆＃34;根据第一个下拉列表的选定值，第二个下拉列表将被填充＆＃34;。我能够通过在jquery中使用简单的if / else条件来实现这一点。这是jquery代码

function loadProgram(program) {
    if (program === 'msc') {
        var element = document.getElementById("candidate_programofinterest");
        var programSelected = element.options[element.selectedIndex].text;
        removeAllOptions(document.candidate.candidate_programofinterest);
        addOption(document.candidate.candidate_programofinterest, '0', 'Masters - Information Systems Management');
        addOption(document.candidate.candidate_programofinterest, '1', 'Masters - Software Engineering');
        addOption(document.candidate.candidate_programofinterest, '2', 'Masters - Computer Security');
        loadIntake('masters');
    } else if (program === 'me') {
        var element = document.getElementById("candidate_programofinterest");
        var programSelected = element.options[element.selectedIndex].text;
        removeAllOptions(document.candidate.candidate_programofinterest);
        addOption(document.candidate.candidate_programofinterest, '8', 'ME - Global IT Management');
        addOption(document.candidate.candidate_programofinterest, '9', 'ME -  Software Development and Multimedia');
        addOption(document.candidate.candidate_programofinterest, '10', 'ME - Systems, Networks and Security');
        loadIntake('me');
    } else {
        var element = document.getElementById("candidate_programofinterest");
        var programSelected = element.options[element.selectedIndex].text;
        removeAllOptions(document.candidate.candidate_programofinterest);
        addOption(document.candidate.candidate_programofinterest, '', 'Choose a Program');
        addOption(document.candidate.candidate_programofinterest, '3', 'Bachelors of Computer Science');
        addOption(document.candidate.candidate_programofinterest, '4', 'Exchange Program');
        addOption(document.candidate.candidate_programofinterest, '5', 'Study Abroad');
        addOption(document.candidate.candidate_programofinterest, '6', 'Scientific Summer School');
        addOption(document.candidate.candidate_programofinterest, '7', 'French Summer School');
    }
}

注意：如果我从浏览器中关闭javascript，则会正确显示字段，但第二个下拉列表不会根据第一个下拉列表中选择的值显示已过滤的选项，而是全部选项将显示在页面加载本身上。

在此之后我尝试在symfony2表单本身内再次创建下拉列表，但这次使用的是AngularJS。这是HTML（twig）代码：

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedTypeName" ng-options="item.type as item.text for item in type_names">
<option value="">Choose Program Type</option>
</select>

<select ng-model="selectedName" ng-options="item.id as item.text for item in names|filter:{type:selectedTypeName}">
<option value="">Choose a Program</option>
</select>

</div>

这是AngularJS代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.type_names = [
        {id: '0', type: 'me', text: 'Master of Computer Engineering'},
        {id: '1', type: 'msc', text: 'Master of Computer Science'},
        {id: '2', type: 'others', text: 'Others'}
    ];
    $scope.names = [
        {id: '0', type: 'msc', text: 'Masters - Information Systems Management'},
        {id: '1', type: 'msc', text: 'Masters - Software Engineering'},
        {id: '2', type: 'msc', text: 'Masters - Computer Security'},
        {id: '3', type: 'others', text: 'Bachelors of Computer Science'},
        {id: '4', type: 'others', text: 'Exchange Program'},
        {id: '5', type: 'others', text: 'Study Abroad'},
        {id: '6', type: 'others', text: 'Scientific Summer School'},
        {id: '7', type: 'others', text: 'French Summer School'},
        {id: '8', type: 'me', text: 'ME - Global IT Management'},
        {id: '9', type: 'me', text: 'ME -  Software Development and Multimedia'},
        {id: '10', type: 'me', text: 'ME - Systems, Networks and Security'}
    ];

});

在上面的AngularJS方法中，我使用javascript填充了两个下拉列表，与之前使用PHP填充下拉列表的方法相反。

注意：在这种方法中，如果我从浏览器中关闭javascript，我的下拉菜单就不会被填充。

我的问题是，我需要Symfony（PHP）来显示我的表单并填充下拉选项，但是我需要AngularJS根据第一个下拉列表中选择的值过滤第二个下拉选项，比如我用jquery做了。所有这一切都在考虑可扩展性。

我也想让Angular为我做前端验证。但我猜这是第二步。

注意：为了实现稳健性，我使用服务器验证和前端。

将AngularJS与Symfony2集成为

0 个答案: