ng-grid issue with template

Question

I have the following ng-grid definition:

$scope.gridActivities = {
    data: 'activities'
    , multiSelect: false
    , columnDefs: [
        { field: 'ID', displayName: 'ID', visible: false },
        { field: 'AppliedWorkType.WorkType.Name', displayName: 'Type' },
        { field: 'CreatedOn', displayName: 'Date', cellFilter: 'date:\'MM/dd/yyyy\'' },
        { field: 'NonBillableHours', displayName: 'Unbilled Hours' },
        { field: 'BillableHours', displayName: 'Billed Hours', cellTemplate: '<input type="number" class="form-control" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" ng-model="row.entity.BillableHours"/>' }
    ]
}

As activities is loaded and displayed by default, the input correctly has the proper values inside of BillableHours and I can see them in the input box. However, when I change the value (from say 5 to 6) and then I look at the activity by debugging and looking at $scope, the activity.BillableHours has switched to undefined.

I'm using a similar method to something I've already gotten working with checkboxes:

{ field: 'ApprovalAuthority', displayName: 'Approval Authority', cellTemplate: '<input class="control-label" style="margin-top: 8px;margin-left: 8px" type="checkbox" ng-model="row.entity.ApprovalAuthority" />' }

Why is this working for checkboxes but not for textboxes?

when you are putting wrong value in that field `ng-pattern` will make that field invalid and the `ng-model` value will become undefined..look at this answer will give you more idea http://stackoverflow.com/a/28338146/2435473 — Pankaj Parkar, Jun 16 '15 at 19:38
@pankajparkar Looks like you're right. I removed the ng-pattern attribute and it appears to work. If I want to still use the ng-pattern, how do I go about adding it in so it works? EDIT: Now I'm extra confused. I took out ng-pattern and it forces the input to be a number. If I put in some random letters and then tab out, it erases the boxes content. — Friend, Jun 16 '15 at 19:43
I'm not sure what you mean by format, even one valid object to fill one row would be great. — Daniel, Jun 16 '15 at 19:50
@Daniel Does this work? `$scope.activities = [ { ID: 0, AppliedWorkType: { WorkType: { Name: "Remote" } }, CreatedOn: "Today", NonBillableHours: 0, BillableHours: 0 } ];` — Friend, Jun 16 '15 at 19:53
@Friend you need to correct your regX, what you want in that textbox? — Pankaj Parkar, Jun 16 '15 at 19:54
@pankajparkar Any number between 0 and infinite with potentially one decimal space. I was thinking that the regX was correct since I've used it in several other places in our client. But to be honest I'm not sure it works because some other developer used it first and I just copy and pasted what they had without looking at it. — Friend, Jun 16 '15 at 19:55
You need to simply remove `type="number"` use `type="text"` will fix it. — Pankaj Parkar, Jun 16 '15 at 19:57
Changing to `type="text"` and adding the `ng-pattern` back in re-broke it. If I take the `ng-pattern` out and leave `type="number"` it works mostly. — Friend, Jun 16 '15 at 20:02
@Friend so then if number is doing the job then why you need your own `regx`? — Pankaj Parkar, Jun 16 '15 at 20:08

score 1 · Accepted Answer · answered Jun 16 '15 at 20:41

1

You forgot to escape the '\' character in your ng-pattern

Just change ng-pattern="/^\d{0,9}(\.\d{1,9})?$/" to ng-pattern="/^\\d{0,9}(\\.\\d{1,9})?$/"

Here's a working plunker

answered Jun 16 '15 at 20:41

Daniel

6,194
7
33
59

ng-grid issue with template

1 Answers1