AngularJS输入框默认值提交后服务端返回undefined问题咨询

咱们直接点出核心问题：你同时用了ng-value和ng-model，但没搞清楚两者的作用逻辑，加上ng-model绑定的变量没初始化，才导致提交时服务端拿到undefined。

两种情况的差异原因 #

1. ng-value和ng-model的本质区别

   • ng-value只是负责给输入框设置初始显示内容，它不会主动把这个值同步到ng-model绑定的变量里。只有当用户手动修改输入框内容时，输入框的change事件才会触发ng-model的双向绑定，把值同步到$scope.Data.defval中。
   • ng-model是双向绑定的核心，它要求绑定的变量（或者变量所在的对象）必须提前初始化。你现在只初始化了$scope.myvar=1，但$scope.Data这个对象甚至都没创建，更别说Data.defval了，所以提交时这个变量自然是undefined。

2. 手动输入为什么正常？
   当你手动输入内容时，AngularJS会自动检测到输入框的变化，帮你自动创建$scope.Data对象和Data.defval属性，并且把输入的值赋值给它，这时候提交自然能拿到正确的值。但这种“自动创建”是AngularJS的兜底行为，不是规范的用法，很容易出问题。

解决办法（两种可选） #

方案一：直接初始化ng-model绑定的变量（推荐）

既然你要通过ng-model提交值，就没必要用ng-value了，直接在控制器里初始化$scope.Data.defval即可：

控制器代码：

app.controller('RoomContrroller', function($scope, $http){
  // 先初始化Data对象，再给defval设默认值
  $scope.Data = {
    defval: 1
  };

  $scope.SaveRecord = function() {
    // 提交$scope.Data，服务端就能正常拿到defval的值了
    $http.post('/your-submit-url', $scope.Data)
      .then(function(res) {
        // 处理成功逻辑
      })
      .catch(function(err) {
        // 处理错误逻辑
      });
  };
});

输入框代码（去掉ng-value）：

<input type="text" id="defval" name="defval" ng-model="Data.defval">

方案二：保留ng-value时手动同步值

如果你的myvar是从其他异步接口获取的，必须用ng-value显示初始值，那就在控制器里手动把myvar的值同步到Data.defval：

控制器代码：

app.controller('RoomContrroller', function($scope, $http){
  $scope.myvar = 1;
  // 初始化Data对象，并同步myvar的值
  $scope.Data = {
    defval: $scope.myvar
  };

  // 如果myvar是异步获取的，要在回调里同步值
  // 比如：
  // $http.get('/get-default-value')
  //   .then(function(res) {
  //     $scope.myvar = res.data;
  //     $scope.Data.defval = $scope.myvar;
  //   });

  $scope.SaveRecord = function() {
    $http.post('/your-submit-url', $scope.Data);
  };
});

输入框可以保留ng-value，但其实此时ng-model已经有初始值了，显示效果完全一致，所以更推荐去掉ng-value避免混淆。

额外提醒 #

AngularJS中使用ng-model绑定对象属性时，一定要提前初始化对应的对象（比如$scope.Data = {}），否则容易触发作用域的原型继承问题，导致变量绑定失效，这是新手非常容易踩的坑。

内容的提问来源于stack exchange，提问作者Rye