Set checkbox value? AngularJS and data model.

row.entity.noteRead shows up as "True" or "False" when I debug.

All the other data is getting set, but the checkbox is not!

'<input type="checkbox" class="includeCheckBox" ng-model="row.entity.noteRead" ng-click="toggleCustomerInclude(row.entity.noteRead)">'

Open in new window



More context:

helpDeskModule.controller("notesController", function ($scope, ticketServices) {
   
       ticketServices.getTicketNotes(name).then(function (notesList) {
        $scope.notes = notesList;
    }, function () { });

    $scope.gridOptionsNotesCustomer = {
        data: 'notes',
        columnDefs: [            
            { field: 'noteDetailID', displayName: 'ID', width: 50, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailNote', displayName: 'Detail Note', width: 300, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteType', displayName: 'Note Type', width: 80, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailCreateDate', displayName: 'Detail Create Date', width: 150, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'workOrderCreateDate', displayName: 'WorkOrder Create Date', width: 170, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'dBFileID', displayName: 'DBFileID', width: 70, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteRead', displayName: 'Read', width: 60, cellTemplate: '<input type="checkbox" class="includeCheckBox" ng-model="row.entity.noteRead" ng-click="toggleCustomerInclude(row.entity.noteRead)">' }
        ],
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        multiSelect: false,
    };


    $scope.toggleCustomerInclude = function (includeOnCustomerRecord) {
        $scope.customerCommunication.includeOnCustomerRecord = !includeOnCustomerRecord;
    }
});

Open in new window

LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
yes, I'm supposing you've more code, I don't know how you bind your data, look like it's not the right wway

if you want to see, just add something like :
<div>{{row.entity.noteRead}}</div>
<div>{{row.entity|json}}</div>
<div>{{row|json}}</div>
0
 
leakim971PluritechnicianCommented:
use ng-checked : https://docs.angularjs.org/api/ng/directive/ngChecked

<input type="checkbox" class="includeCheckBox" ng-model="row.entity.noteRead" ng-checked="row.entity.noteRead" ng-click="toggleCustomerInclude(row.entity.noteRead)" />
</div>

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
Now it is setting BOTH checkboxes to checked, even though one is true and one is false.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Tom KnowltonWeb developerAuthor Commented:
record 1
record 2
0
 
Tom KnowltonWeb developerAuthor Commented:
Sorry, here was the second time I hit the breakpoint:

rec 2
0
 
Tom KnowltonWeb developerAuthor Commented:
In the DEV TOOLS in Chrome:

javascript debug true / false in array of values.

In the GUI, both checkboxes  are checked:

both checked
0
 
Tom KnowltonWeb developerAuthor Commented:
Is it a problem with how the "truthy-ness" is being interpreted?
0
 
leakim971PluritechnicianCommented:
What about :
<input type="checkbox" class="includeCheckBox" ng-model="row.entity.noteRead" ng-checked="row.entity.noteRead=='True'" ng-click="toggleCustomerInclude(row.entity.noteRead)" />
0
 
Tom KnowltonWeb developerAuthor Commented:
has problems with:

ng-checked="row.entity.noteRead=='True'"

is this okay (remove single quotes around TRUTH):

ng-checked="row.entity.noteRead==True"


syntax errors go away then...
0
 
Tom KnowltonWeb developerAuthor Commented:
This iteration leaves both checkboxes unchecked:


 $scope.gridOptionsNotesCustomer = {
        data: 'notes',
        columnDefs: [            
            { field: 'noteDetailID', displayName: 'ID', width: 50, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailNote', displayName: 'Detail Note', width: 300, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteType', displayName: 'Note Type', width: 80, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailCreateDate', displayName: 'Detail Create Date', width: 150, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'workOrderCreateDate', displayName: 'WorkOrder Create Date', width: 170, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'dBFileID', displayName: 'DBFileID', width: 70, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteRead', displayName: 'Read', width: 60, cellTemplate: '<input type="checkbox" class="includeCheckBox" ng-model="row.entity.noteRead" ng-checked="row.entity.noteRead==True" ng-click="toggleCustomerInclude(row.entity.noteRead)" />' }

        //{ field: 'noteRead', displayName: 'Read', width: 60, cellTemplate: '<input type="checkbox" class="includeCheckBox" ng-checked="row.entity.noteRead" ng-click="toggleCustomerInclude(row.entity.noteRead)" />' }
        ],
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        multiSelect: false,
    };

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
Is there a way to see what Chrome "thinks" the value is for row.entity.noteRead


It comes through as a string, right?
0
 
Tom KnowltonWeb developerAuthor Commented:
If I just display the value of "noteRead" in a cell, this is what I see:

raw

Here is the javascript:

    $scope.gridOptionsNotesCustomer = {
        data: 'notes',
        columnDefs: [            
            { field: 'noteDetailID', displayName: 'ID', width: 50, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailNote', displayName: 'Detail Note', width: 300, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteType', displayName: 'Note Type', width: 80, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailCreateDate', displayName: 'Detail Create Date', width: 150, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'workOrderCreateDate', displayName: 'WorkOrder Create Date', width: 170, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'dBFileID', displayName: 'DBFileID', width: 70, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteRead', displayName: 'Read', width: 60, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteRead', displayName: 'Read', width: 60, cellTemplate: '<input type="checkbox" class="includeCheckBox" ng-model="notes" ng-checked="row.entity.noteRead" ng-click="toggleCustomerInclude(row.entity.noteRead)" />' }
        ],
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        multiSelect: false,
    };

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
Okay.

A co-worker stopped by my desk and was able to help me.  He explained this to me, I hope I have it right:

The reason the checkbox was not setting was I was using "True" instead of "true" and "False" instead of "false".  In order for angular to properly set the checkbox (using the data model) I had to be passing in "true" not "True" ... or tell angular the equivalent of "true" using ng-true-value="True".  "True" and "true" are not the same thing to angular.
0
 
Tom KnowltonWeb developerAuthor Commented:
Thanks!
0
 
leakim971PluritechnicianCommented:
that's why ID: 40342494

I put :  ng-checked="row.entity.noteRead=='True'"

My bad I was not clear...
0
 
Tom KnowltonWeb developerAuthor Commented:
No worries!


This seems to work:


  $scope.gridOptionsNotesCustomer = {
        data: 'notes',
        columnDefs: [            
            { field: 'noteDetailID', displayName: 'ID', width: 50, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailNote', displayName: 'Detail Note', width: 300, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteType', displayName: 'Note Type', width: 80, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'detailCreateDate', displayName: 'Detail Create Date', width: 150, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'workOrderCreateDate', displayName: 'WorkOrder Create Date', width: 170, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'dBFileID', displayName: 'DBFileID', width: 70, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteRead', displayName: 'Read Raw Val', width: 60, cellTemplate: '/Templates/CellTemplateWrapTitle.html' },
            { field: 'noteRead', displayName: 'Read', width: 60, cellTemplate: '<input type="checkbox" class="includeCheckBox" ng-model="row.entity.noteRead" ng-true-value="true" ng-false-value="false" />' }
        ],
        showFilter: true,
        enableColumnResize: true,
        enableColumnReordering: true,
        multiSelect: false,
    };

Open in new window

0
All Courses

From novice to tech pro — start learning today.