AngularJS新手求助：ng-submit提交表单后获取旧值问题

嗨，我来帮你搞定这个问题！从你给出的代码片段来看，表单部分没写完，大概率是输入框没有正确绑定双向数据，导致提交时拿到的还是初始的旧值。

修正后的完整可运行代码 #

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myTxt = "You have not yet clicked submit";
  $scope.sidebarname = "Vendor";
  $scope.myFunc = function () {
    $scope.myTxt = "You clicked submit!";
    alert($scope.sidebarname); // 现在能拿到用户输入的最新值了
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <form ng-submit="myFunc()">
    <!-- 核心：给输入框添加ng-model绑定到$scope的sidebarname -->
    <input type="text" ng-model="sidebarname" placeholder="输入新名称">
    <button type="submit">提交</button>
  </form>
  <p>{{myTxt}}</p>
</div>

问题根源分析 #

你之前拿到旧值，最可能的原因是输入框没有通过ng-model绑定到$scope.sidebarname：
AngularJS的双向数据绑定完全依赖ng-model指令，如果输入框没加这个绑定，用户输入的内容根本不会同步到$scope对象里，提交时自然只能拿到初始的"Vendor"值。

另外补充个小细节：ng-submit已经帮我们自动阻止了表单默认的页面刷新行为，所以不用额外写preventDefault()~

更直观的写法（可选） #

如果你想更明确地传递最新值，可以把变量作为参数传入提交函数，代码可读性会更好：

<form ng-submit="myFunc(sidebarname)">
  <input type="text" ng-model="sidebarname" placeholder="输入新名称">
  <button type="submit">提交</button>
</form>

$scope.myFunc = function (newSidebarName) {
  $scope.myTxt = "You clicked submit!";
  alert(newSidebarName); // 直接获取最新输入值
}

这样修改后，提交表单时就能正确拿到用户输入的最新内容啦！

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