javascript - 范围内的初始化会覆盖数组值

Question

我面临一个小问题。我几乎完成了我的功能。

我有一个表格，我可以在其中为用户提供提交多个项目的选项。单击“添加更多”功能后动态生成下拉列表有助于实现这一点。现在用户可以生成任意数量的下拉列表。我正在捕获数组中的值并将其发送到服务器以保存在数据库中。

这是 HTML 代码：

<form name="form" class="form-horizontal" ng-submit="save()" style="margin-left:220px;">
        <table cellpadding="10">    
<tr>
                <td></td>
                <!--data-ng-repeat='item in array'-->
                <td style="width: 270px;">
                    <div>
                        <div ng-controller="AlertDemoCtrl">
                            <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" ng-model="ProjectId[item]">
                        <ul style="list-style-type: none; margin-left: 0px;">
                            <li >
                                <!--data-ng-model="selectedProject[$index]"-->
                                <!--data-ng-model="test.ProjectId"-->
                                <!--<select data-ng-model="test.ProjectId" 
                                data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project">-->
                                <select>
                                    <option value="">-- Choose a Project --</option>
                                    <option ng-repeat="item in items" value="{{item.ProjectId}}">{{item.ProjectName}}</option>
                                </select>
                                <button type="button" ng-click="closeAlert($index)"><img src="delete.png" alt="Remove" style="height:20px; width:20px;" /></button>
                            </li>
                        </ul>
                    </alert>
                            <button class='btn' type='button' ng-click="addAlert()">Add Projects</button>
                        </div>
                    </div>
                </td>
                <td>
                    <label id="Label2" style="color: red"></label>
                </td>
            </tr>
</table>
        <div style="margin-left: 200px;">
            <input type="submit" class="btn btn-primary" name="Submit" value="Submit" onclick="return validateForm()" />
            <a href="#/emp" class="btn">Cancel</a>
        </div>

    </form>

ALERT 是允许我们在点击“添加更多”时生成动态下拉列表的自定义指令

app.js 中的控制器代码

var CreateCtrlEmp = function ($scope, $location, SampleEmp, SampleProj, SampleDes, sharedValues) {
$scope.items = SampleProj.query({ q: $scope.query });
$scope.itemsd = SampleDes.query({ q: $scope.query });
$scope.save = function () {
    //issue over here
    $scope.item.ProjectId = [];
    SampleEmp.save($scope.item);
    $location.path('/emp');
};};

现在我没有在服务器端代码中获得选定的值。可能的问题是：

1. 该代码无法将值发送到服务器端代码，即它正在传递一个空数组。
2. $scope.item.ProjectId = []的初始化；正在重写发布的值，因此我得到了空数组。

注意：当我在控制器中传递静态值时，例如：

$scope.item.ProjectId = [5,7];

该功能工作正常。

请指导。

谢谢一吨！

图沙尔·夏尔马

Answer 1

您应该将选定的值存储在模型中并使用 ng-submit 发送模型。我也不建议在选择标签中使用 ng-repeat 填充选项。请记住，ng-model 等于 value=""。模型中的内容就是发送的内容。如果您想在视图加载时预选某些内容，也可以使用模型。

做这样的事情（你的例子的缩小版）：

模板

<form name="form" class="form-horizontal" ng-submit="save(myForm)" style="margin-left:220px;">

    <table cellpadding="10">    
        <tr>
            <td style="width: 270px;">
                <div>
                    <div ng-controller="AlertDemoCtrl">
                        <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" ng-model="ProjectId[item]">
                    <ul style="list-style-type: none; margin-left: 0px;">
                        <li >
                            <!--data-ng-model="selectedProject[$index]"-->
                            <!--data-ng-model="test.ProjectId"-->
                            <!--<select data-ng-model="test.ProjectId" data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project">-->
                            <select ng-model="myForm.project" ng-options="test.ProjectId as test.ProjectName for test in items">
                                <option>-- Choose a Project --</option>
                            </select>
                        <li>
                    </ul>
                </div>
            </td>       
        </tr>
    </table>
    
</form>

控制器

$scope.save = function (myForm) {
    SampleEmp.save(myForm);
    $location.path('/emp');
};