Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-model no longer updates after typing into text input

I am new to AngularJS and I am having a problem that I am having trouble solving, there was a similar question on stackoverflow but it didn't seem to help me out. I basically have a form that gets updated by ng-click, but once once I enter text into any of the text boxes, those text boxes no longer update.

This is my 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>



This is my function that is called when someone clicks on a link

$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;
  })
}
like image 373
EvWill Avatar asked Oct 11 '13 04:10

EvWill


People also ask

What does [( ngModel )] do?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

What is the difference between ng-model and ngModel?

I know you're in a hurry for the answer, but a bit of understanding helps. The answer is: (ngModel) causes a 1-way data-binding, whereas [(ngModel)] ensures a two-way data binding. So, let's do it with an example for understanding.


1 Answers

your link requires a login.

if i have to guess about your problem, it may be related to angular scoping issue. try changing your ng-model binding to an object property instead. so in your html, instead of:

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

do this

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

and in your javascript, on the ajax callback, change it to:

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

for more info on this issue, see: https://github.com/angular/angular.js/wiki/Understanding-Scopes

like image 143
rickhuynh Avatar answered Oct 03 '22 08:10

rickhuynh