0

Using AngularJs 1.6.7, I have created a table which pulls project details from a database and displays these details within a table. Each row has a modify/update button using ng-show/hide. When modify is clicked, the div changes to editable input fields, when update is clicked, the new input data will be update in the database.

I am trying to access input items within an ng-repeat and using ng-model to bind the input to update projects in a database using Flask.

The problem is that when I access the data in AJS once update is clicked, no data has binded to the new input values.

My HTML looks like this.

     <tr data-ng-repeat="(key, value) in projects" >
          <td>
              <div data-ng-hide="edditable_project[value.project_name]">{[value.project_name]} 
              </div>
              <div data-ng-show="edditable_project[value.project_name]">
                  <input class="form-control" data-mg-model="updatedProjectName" value="{[value.project_name]}">
              </div>
          </td>
          <td>
              <button class="btn btn-danger add-on pull-right btn-sm"  data-ng-click="removeProject(value)">Delete</button>
              <button class="btn btn-primary add-on btn-sm pull-right" data-ng-hide="edditable_project[value.project_name]" data-ng-click="modify(value.project_name)">Modify</button>
               <button type="submit" class="btn btn-success pull-right btn-sm " data-ng-show="edditable_project[value.project_name]" data-ng-click="update(value)">Update</button>
         </td>
     </tr>

And my controller looks like this:

app.controller('projectSettingsController', ['$scope', '$http', function($scope, $http) {

$scope.modify = function(project) {
    $scope.edditable_project[project] = true;
};

$scope.update = function(project) {
    data = {
                project_name: $scope.updatedProjectName,
            }
    console.log($scope.updatedProjectName);
    // Update project.
    $http.post('/api/project/update-project', data).then(function(response) {
        toastr.success(response.data);
    });

    $http.get('/api/project/get-all-project-details').then(function (response) {
        $scope.projects = response.data;
    });
    $scope.edditable_project[project] = false;

  };
}]);

The current output for ng-model="updatedProjectName" is undefined.

Am I doing something wrong within the scope?

Pradnya Sinalkar
  • 1,116
  • 4
  • 12
  • 26
Elena Lanigan
  • 31
  • 5

3 Answers3

0

well you should define your binding vairable in the scope of your controller like $scope.updatedProjectName =""; by default it`s null as you have described, but for all your inputs you will have one data binding, i think you should have some $scope.data={}; tr data-ng-repeat="(key, value) in projects" > <input data-ng-model="data[key]"> </tr> and you don`t need to set value in your input, ng-model will make it for you

Simon Pasku
  • 539
  • 2
  • 4
  • 17
0

You are trying to access a variable which is defined inside of ng-repeat's scope. What you would want to do in this case is pass value and work on the project variable inside the update function.

Change your mark up to data-mg-model="value.project_name". Now the ng-model binds to same. When the update completes set the latest data(if needed) as properties on project. It will reflect in the view because of 2 way data binding

Inside update you should do as follows

$scope.update = function(project) {

  // Update project.
  $http.post('/api/project/update-project', project).then(function(response) {
    toastr.success(response.data);
    // If needed set new properties on the project variable
    // based on the response
  });

}
Abhishek Sarkar
  • 488
  • 1
  • 4
  • 12
0

You seem to have a typo:

<input class="form-control" data-mg-model="updatedProjectName" value="{[value.project_name]}">

Use ng-model instead of mg-model.

M H
  • 1
  • 2