Solved

Set checkbox value?  AngularJS and data model.

Posted on 2014-09-23
16
3,331 Views
Last Modified: 2014-09-24
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

0
Comment
Question by:knowlton
  • 12
  • 4
16 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Now it is setting BOTH checkboxes to checked, even though one is true and one is false.
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
record 1
record 2
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Sorry, here was the second time I hit the breakpoint:

rec 2
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
In the DEV TOOLS in Chrome:

javascript debug true / false in array of values.

In the GUI, both checkboxes  are checked:

both checked
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Is it a problem with how the "truthy-ness" is being interpreted?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 
LVL 5

Author Comment

by:knowlton
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 5

Author Comment

by:knowlton
Comment Utility
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
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Is there a way to see what Chrome "thinks" the value is for row.entity.noteRead


It comes through as a string, right?
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
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
 
LVL 5

Author Comment

by:knowlton
Comment Utility
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
 
LVL 5

Author Closing Comment

by:knowlton
Comment Utility
Thanks!
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
that's why ID: 40342494

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

My bad I was not clear...
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
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

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

There is a huge demand for CodeIgniter among the PHP web developers due to its dynamic features and benefits these days. It is one of most popular and agile open source PHP framework for creating robust web applications in PHP web development field.…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now