CODEWITHSUNDEEP
javascriptangularjs
wobsoriano
wobsoriano

Reputation: 13462

AngularJS ng-model input with value

I have inputs that has values and when I add an ng-model to each input, the value doesn't show up. Here is my code:

student-list.html

<!--edit form-->
<div class="col s12" ng-show="dataForm">
  <div class="row">
    <div class="input-field col l6 s12">
      <input id="first_name" value="{{student[0].fname}}" type="text" class="validate">
      <label class="active" for="first_name">First Name</label>
    </div>
    <div class="input-field col l6 s12">
      <input id="last_name" value="{{ student[0].lname }}" type="text" class="validate">
      <label class="active"  for="last_name">Last Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col l6 s12">
      <input id="email" value="{{ student[0].email }}" type="text" class="validate">
      <label class="active"  for="email">E-mail Address</label>
    </div>
    <div class="input-field col l6 s12">
      <input id="age" value="{{ student[0].age }}" type="text" class="validate">
      <label class="active"  for="age">Age</label>
    </div>
  </div>
  <button class="btn waves-effect waves-light" ng-click="updateStudent()">Submit
  <i class="material-icons right">send</i>
  </button>
  <button class="btn waves-effect waves-light pink accent-3" ng-click="cancelEditStudent()">Cancel</button>
</div>
<!-- form -->
<table class="highlight responsive-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="s in students | filter:searchStudent" ng-show="studentsPanel">
      <td>{{ s.fname }} {{ s.lname }}</td>
      <td>{{ s.age }}</td>
      <td>{{ s.email }}</td>
      <td><a href="javascript:void(0)" ng-click="editStudent(s.id)">Edit</a> <a href="javascript:void(0)" ng-click="deleteStudent(s.id)">Delete</a></td>
    </tr>
  </tbody>
</table>

studentController.js

angular
    .module('studentInfoApp')
    .factory('Student', Student)
    .controller('StudentsController', StudentsController)
    .config(config);

function config($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'StudentsController',
        templateUrl: 'app/views/student-list.html'
    })
    .otherwise({
        redirectTo: '/'
    });
}

function Student($resource) {
    //return $resource('/students/:id');
    return $resource("/students/:id", {}, {
        'get':    {method:'GET'},
        'save':   {method:'POST'},
        'query':  {method:'GET', isArray:true},
        'remove': {method:'DELETE'},
        'delete': {method:'DELETE'}
    });
}

function StudentsController(Student, $scope, $http) {
$scope.editStudent = function(id) {
        Student.query({ id: id }, function(data, headers) {
            $scope.student = data;
            $scope.dataForm = true;
        }, function (error) {
            console.log(error);
        });

    }
}

This actually works, however if I add a model in an input for example:

<input id="first_name" value="{{student[0].fname}}" type="text" class="validate" ng-model="editForm.fname">

the input value won't show up anymore. Am I missing something here?

Upvotes: 0

Views: 68

Answers (2)

hally9k
hally9k

Reputation: 2593

The <input />'s value gets over written by the value of the variable referenced by ng-model on the first digest.

You are declaring a two-way binding when you use ng-model. Angular will sync the <input />'s value with the referenced variable and vice versa on every digest.

Instead of setting your <input />'s initial value by using the value attribute set the variable referenced by ng-model to the desired initial value.

Upvotes: 2

apairet
apairet

Reputation: 3162

The ng-model directive will set the value for you. Just remove the value in your markup and set ng-model to 

<input id="first_name" type="text" class="validate" ng-model="student[0].fname">

Next time, please provide a plunkr / jsfiddle or the like.

Regards

Upvotes: 1

Related Questions