AngularJS: Material Design Demo - 4

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div class="container" ng-controller="Controller as ctrl">
  <div class="row header">
    <div class="col col-40">Name</div>
    <div class="col col-60">Marks</div>
  </div>
  <button ng-click="ctrl.updateList(ctrl.updatedList);">
    update
  </button>
  <div class="row" ng-repeat="(key, user) in ctrl.userList">
    <div class="col col-40" ng-bind="user.name"></div>
    <div class="col col-60">
      <input type="text" name="actual_marks" ng-model="ctrl.markscardData.actual_marks[user.user_id]" placeholder="Please enter the marks" />
    </div>
  </div>
  <pre>
  {{ctrl.markscardData | json }}
</pre>
</div>

JavaScript

// app.module.js
(function() {
  angular
    .module('app', [])
    .controller('Controller', Controller);

  function Controller() {
    var ctrl = this;
    this.markscardData = {};
    this.userList = [{
      "name": "Harshith",
      "user_id": "249",
      "actual_marks": "76",
      "min_marks": "40",
      "max_marks": "100"
    }, {
      "name": "Nithin",
      "user_id": "246",
      "actual_marks": "60",
      "min_marks": "40",
      "max_marks": "100"
    }, {
      "name": "Prathik",
      "user_id": "247",
      "actual_marks": "70",
      "min_marks": "40",
      "max_marks": "100"
    }, {
      "name": "Ravee",
      "user_id": "250",
      "actual_marks": "80",
      "min_marks": "40",
      "max_marks": "100"
    }, {
      "name": "Shivarama",
      "user_id": "248",
      "actual_marks": "90",
      "min_marks": "40",
      "max_marks": "100"
    }];


    this.updatedList = [{
      "name": "Harshith",
      "user_id": "249",
      "actual_marks": "95",
      "min_marks": "40",
      "max_marks": "100"
    }];
    this.markscardData = {
        actual_marks  : {}
    }
    this.updateList = function(newList) {
      angular.forEach(newList, function(user) {
        if (!user || !user.user_id) return;
        console.log('user', user.user_id)
        ctrl.markscardData.actual_marks[user.user_id] = user.actual_marks;
      });
    }
  }
})();