【问题标题】:ng-model no longer updates after typing into text inputng-model 在输入文本后不再更新
【发布时间】:2013-10-19 01:27:46
【问题描述】:

我是 AngularJS 的新手,我遇到了一个我无法解决的问题,stackoverflow 上有一个类似的问题,但它似乎并没有帮助我。我基本上有一个通过 ng-click 更新的表单,但是一旦我在任何文本框中输入文本,这些文本框就不再更新。

这是我的 HTML

Edit Course:
<li ng-repeat="course in courses">
  <p>
    <a ng-click="Edit_Course(course.id)">{{course.course_name}}</a>
  </p>
</li>
<div ng-show="showedit == 1">
  <form novalidate ng-submit="edit_course()" class="simple-form">
    <label for="form_course_name">Course</label>
      <input type="text" id="form_course_name" ng-model="edit_course_name">
    <label for="form_par">Par</label>
      <input type="text" id="form_par" ng-model="edit_course_par">
    <label for="form_course_location">Course Location</label>
      <input type="text" id="form_course_location" ng-model="edit_course_location">
     <input type="submit" id="submit" value="Edit Course" />
   </form>
</div>



这是我在有人点击链接时调用的函数

$scope.Edit_Course = function (id) {
    var course = {
        'course_id' : id
    };

    $http({method: "POST", url: "http://www.dgcharts.com/editcourse", data: course})
    .success(function(data, status, headers, config){

      thecourse = data["course"];
      $scope.edit_course_name = thecourse.course_name;
      $scope.edit_course_par = thecourse.par;
      $scope.edit_course_location = thecourse.course_location;
      $scope.edit_course_id = thecourse.id;
      $scope.showedit = 1;
  })
}

【问题讨论】:

    标签: javascript html angularjs angular-ngmodel


    【解决方案1】:

    您的链接需要登录。

    如果我必须猜测您的问题,它可能与角度范围问题有关。尝试将您的 ng-model 绑定更改为对象属性。所以在你的 html 中,而不是:

    <input type="text" id="form_course_name" ng-model="edit_course_name">
    

    这样做

    <input type="text" id="form_course_name" ng-model="course.edit_course_name">
    

    并在您的 javascript 中,在 ajax 回调中,将其更改为:

    $scope.course = {};  //only do this if $scope.course has not already been declared
    $scope.course.edit_course_name = thecourse.course_name;
    

    有关此问题的更多信息,请参阅:https://github.com/angular/angular.js/wiki/Understanding-Scopes

    【讨论】:

    • 非常感谢,在大约 60 秒内修复了它。在继续这个项目之前,我肯定会阅读范围,因为我显然不完全理解它们。
    • @EvWill 很好地解释了为什么它不适用于原语github.com/angular/angular.js/wiki/Understanding-Scopes
    • 我用错了一个多月了,非常感谢。如果这不是正确的方式,那么 Angular 不应该允许开发人员以这种方式编写代码。这个问题吓了我整整两个晚上。 :D
    • 在范围上有同样的问题,但与 ng-include 相关。非常有用的链接
    • 那个链接是救命稻草,它对我对 Angular 作用域的理解产生了重大影响,并最终记录了嵌入和作用域绑定的工作原理!几个月来,我一直试图弄清楚这些,而这篇文章以清晰、简单的方式为我整理了所有内容。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-21
    • 2019-06-02
    • 2014-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多