Angular JS 表单提交不发送 ID

Question

我正在尝试通过表单按钮将课程 id 发送到控制器，但它似乎不起作用。控制器正确记录 vm.add.year 但 vm.add.course 得到 undefined。为什么？

index.html:

    <form method="post" ng-submit="vm.addCourseToYear()">
        <table class="table">

            <tr ng-repeat="course in vm.courses | filter:search">
                <td>{{course.courseName}}</td>

                <td><select id="addCourse" name="addCourse" class="form-control"  ng-model="vm.add.year" required>
                    <option value="year1"> Year1 </option>
                </select></td>

                <td><input style="display:none" ng-value="course._id" ng-model="vm.add.course">
                    <button type="submit" class="btn btn-primary" id="{{course._id}}">Add</button>
                </td>
            </tr>
         </table>
    </form>

index.controller.js

function addCourseToYear(){
    console.log(vm.add.course);
    console.log(vm.add.year);
};

Answer 1

尝试将代码更改为：

<form method="post" ng-submit="vm.addCourseToYear(vm.add.course._id)">

希望这能解决您的问题..:)

Answer 2

display:none 从中删除对象，将其更改为 visibility: hidden;position:absolute

<input style="visibility:hidden;position:absolute;" ng-value="course._id" ng-model="vm.add.course">

Answer 3

我将执行以下操作来解决此问题：

向按钮添加 ng-click 指令：

<button type="submit"
        class="btn btn-primary"
        ng-click="vm.addCourseToYear(vm.add)"
        id="{{course._id}}">Add</button>

删除表单操作，只留下表单：

<form>

改变函数接受一个参数：

function addCourseToYear(newItem){
    console.log(newItem.course);
    console.log(newItem.year);
};

更改此设置以将 vm.add.course 初始化为 course._id:

<td>
    <input style="display:none" ng-init="vm.add.course = course._id" ng-model="vm.add.course">
    <button type="submit" class="btn btn-primary" id="{{course._id}}">Add</button>
</td>

这遵循 Angular 网站上的模式：https://docs.angularjs.org/guide/forms

Angular JS 表单提交不发送 ID

Angular JS Forms submit not sending ID

forms

form-submit

angularjs