范围初始化会覆盖数组值

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];

功能正常。

请指导。

Thanx一吨！

Tushar Sharma

Answer 1

您应该将所选值存储在模型中，并使用ng-submit发送模型。我也不建议在select标签中使用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');
};