Add TAB between field behavior option

app/scripts/nutritionController.js

@@ -125,7 +125,9 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE
       title: 'Add a comment',
       validators: {
         'md-maxlength': 30
-      }
+      },
+        escToClose:true,
+        tabToNext:true
     };
 
     var promise = $scope.options.largeEditDialog ? $mdEditDialog.large(dialog) : $mdEditDialog.small(dialog);
@@ -139,6 +141,36 @@ angular.module('nutritionApp').controller('nutritionController', ['$http', '$mdE
     });
   };
 
+    $scope.editProtein = function (event, dessert) {
+        event.stopPropagation();
+
+        var dialog = {
+            // messages: {
+            //   test: 'I don\'t like tests!'
+            // },
+            modelValue: dessert.protein.value,
+            placeholder: 'Add protein amt',
+            save: function (input) {
+                dessert.protein.value = input.$modelValue;
+            },
+            targetEvent: event,
+            title: 'Add a protein amt',
+            validators: {
+                'md-maxlength': 30
+            }
+        };
+
+        var promise = $scope.options.largeEditDialog ? $mdEditDialog.large(dialog) : $mdEditDialog.small(dialog);
+
+        promise.then(function (ctrl) {
+            var input = ctrl.getInput();
+
+            input.$viewChangeListeners.push(function () {
+                input.$setValidity('test', input.$modelValue !== 'test');
+            });
+        });
+    };
+
   $scope.toggleLimitOptions = function () {
     $scope.limitOptions = $scope.limitOptions ? undefined : [5, 10, 15];
   };

app/templates/nutrition-table.html

@@ -62,7 +62,7 @@
         <td md-cell>{{dessert.calories.value}}</td>
         <td md-cell>{{dessert.fat.value | number: 2}}</td>
         <!-- <td md-cell>{{dessert.carbs.value}}</td> -->
-        <td md-cell>{{dessert.protein.value | number: 2}}</td>
+        <td md-cell ng-click="editProtein($event, dessert)" ng-class="{'md-placeholder': !dessert.protein}">{{dessert.protein.value | number: 2}}</td>
         <!-- <td md-cell>{{dessert.sodium.value}}</td> -->
         <!-- <td md-cell>{{dessert.calcium.value}}%</td> -->
         <td md-cell hide-sm>{{dessert.iron.value}}%</td>

dist/md-data-table.css

@@ -2,12 +2,10 @@ md-backdrop.md-edit-dialog-backdrop {
   z-index: 80;
 }
 md-edit-dialog {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -ms-flex-direction: column;
+      flex-direction: column;
   position: fixed;
   z-index: 81;
   background-color: #f9f9f9;
@@ -50,57 +48,47 @@ md-edit-dialog > .md-actions .md-button + .md-button {
   margin-left: 8px;
 }
 .md-table-pagination {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  -webkit-flex-wrap: wrap-reverse;
-      -ms-flex-wrap: wrap-reverse;
-          flex-wrap: wrap-reverse;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+  -ms-flex-wrap: wrap-reverse;
+      flex-wrap: wrap-reverse;
   box-sizing: border-box;
   padding: 0 24px;
   font-size: 12px;
   color: rgba(0, 0, 0, 0.54);
   border-top: 1px rgba(0, 0, 0, 0.12) solid;
 }
 .md-table-pagination md-select {
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
   min-width: 64px;
 }
 .md-table-pagination md-select:not([disabled]):focus .md-select-value {
   color: rgba(0, 0, 0, 0.54);
 }
 .md-table-pagination md-select .md-select-value {
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
 }
 .md-table-pagination md-select .md-select-value span.md-select-icon {
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -ms-flex-pack: center;
+      justify-content: center;
   text-align: center;
   margin-right: -6px !important;
 }
 .md-table-pagination md-select .md-select-value span.md-select-icon:after {
   top: initial;
-  -webkit-transform: scaleY(0.5) scaleX(1);
-          transform: scaleY(0.5) scaleX(1);
+  transform: scaleY(0.5) scaleX(1);
 }
 .md-table-pagination > * {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
   height: 56px;
 }
 .md-table-pagination > .buttons:not(:first-child),
@@ -128,22 +116,18 @@ md-select.md-table-select > .md-select-value {
 md-select.md-table-select > .md-select-value > span {
   display: block;
   height: auto;
-  -webkit-transform: none !important;
-          transform: none !important;
+  transform: none !important;
 }
 md-select.md-table-select > .md-select-value > span > .md-text {
   display: inherit;
   height: inherit;
-  -webkit-transform: inherit;
-          transform: inherit;
+  transform: inherit;
 }
 md-select.md-table-select > .md-select-value > span.md-select-icon {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+      align-items: center;
   height: 24px;
   margin: 0;
 }
@@ -271,16 +255,13 @@ table.md-table th.md-column md-icon {
 table.md-table th.md-column md-icon.md-sort-icon {
   color: rgba(0, 0, 0, 0.26);
   opacity: 0;
-  transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: transform 0.25s, opacity 0.25s;
 }
 table.md-table th.md-column md-icon.md-sort-icon.md-asc {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
+  transform: rotate(0deg);
 }
 table.md-table th.md-column md-icon.md-sort-icon.md-desc {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 table.md-table th.md-column md-icon:not(:first-child) {
   margin-left: 8px;
@@ -368,27 +349,23 @@ table.md-table td.md-cell {
   border-top: 1px rgba(0, 0, 0, 0.12) solid;
 }
 table.md-table td.md-cell.md-numeric md-select {
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
 }
 table.md-table td.md-cell.md-numeric md-select .md-select-value {
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
 }
 table.md-table td.md-cell.md-placeholder {
   color: rgba(0, 0, 0, 0.26);
 }
 table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon {
-  -webkit-justify-content: flex-end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
   color: rgba(0, 0, 0, 0.54);
   width: 18px;
   text-align: right;
 }
 table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon:after {
-  -webkit-transform: scaleY(0.4) scaleX(0.8);
-          transform: scaleY(0.4) scaleX(0.8);
+  transform: scaleY(0.4) scaleX(0.8);
 }