ng-checked is true but not enabled?

Question

My data looks like, where each entry is log, coming from SupportService

var getDummyLogsForNow = function () {
    return [
        {
            "fileName": "file A",
            "location": "logs/fileA",
            "size": "20000",
            "lastUpdated": "May 04, 2015 09:21PM"
        },
        {
            "fileName": "file B",
            "location": "logs/fileB",
            "size": "4034300",
            "lastUpdated": "May 01, 2015 01:21PM"
        },
        {
            "fileName": "file C",
            "location": "logs/fileC",
            "size": "53437000",
            "lastUpdated": "May 02, 2015 03:11PM"
        }
    ]
};

return {
    logs: getDummyLogsForNow()
};

In my controller, I use it as

$scope.logs = SupportService.logs;
$scope.selectedLogs = ["file C"];

and this is how I print them up on HTML table

    <table class="logsTable">
        <thead>
        <tr>
            <th>#</th>
            <th>File Name</th>
            <th>Last Updated</th>
            <th>Size</th>
            <th>Location</th>
        </tr>
        </thead>
        <tr ng-repeat="log in logs">
            <td>
                <input type="checkbox"
                       ng-checked="selectedLogs.indexOf(log.fileName) != -1"
                       ng-click="toggleSelect(log)">
            </td>
            <td>{{log.fileName}}</td>
            <td>{{log.lastUpdated}}</td>
            <td>{{log.size}}</td>
            <!--<td>{{log.location}}</td>-->
            <td>{{selectedLogs.indexOf(log.fileName) != -1}}</td>
        </tr>
    </table>

Even though one of the entries if true, the checkbox is not checked. All I see is

enter image description here

What's the issue here?

Each repeated element gets it's own scope so try `$parent.$parent.selectedLogs.indexOf(log.fileName) != -1`. — R3tep, May 05 '15 at 14:03
That did not help either @R3tep. The weird thing is that when I refresh page, I see all of them enabled and suddenly disappear — daydreamer, May 05 '15 at 14:15
[Check this](http://stackoverflow.com/questions/14226439/angularjs-doesnt-bind-ng-checked-with-ng-model) (They use ng-repeat like you) — Itay, May 05 '15 at 14:16
I put your example in a plunker as-is - it works fine: http://plnkr.co/edit/yKpq8QwPc6ngVxAcUxAB?p=preview — New Dev, May 05 '15 at 14:41
Very interesting, I am not sure what is screwed up in my page then `:(` — daydreamer, May 05 '15 at 14:47
Browser Issue! Chrome acting weird (good in InCognito Mode), works well on Safari — daydreamer, May 05 '15 at 14:50
I am using Firefox and the same issue. Private browsing didnt help here :/ What did help is to move the ng-app and ng-controller directives to body and div container elements as in: http://plnkr.co/edit/ZEn55txecJRwhMQGdR4Y?p=preview Maybe that's the same case in your project? — Alex, May 05 '15 at 15:05

score 0 · Answer 1 · answered May 05 '15 at 14:36

I think you may have something wrong with referencing your model. I've simplified your example (dropped the service) and have a working example here: https://jsfiddle.net/fpnte4td/6/

So probably there must be something in the controller or service... Can you try defining the sample data directly in the controller, like below?

$scope.logs = [{
        "fileName": "file A",
        "location": "logs/fileA",
        "size": "20000",
        "lastUpdated": "May 04, 2015 09:21PM"
    },{
        "fileName": "file B",
        "location": "logs/fileB",
        "size": "4034300",
        "lastUpdated": "May 01, 2015 01:21PM"
    },{
        "fileName": "file C",
        "location": "logs/fileC",
        "size": "53437000",
        "lastUpdated": "May 02, 2015 03:11PM"
    }
];

If this doesn't help, please post full body of the service and controller (skip irrelevant parts)

This should be a comment - not an answer - since it doesn't actually answer the question — New Dev, May 05 '15 at 14:37

ng-checked is true but not enabled?

1 Answers1