javascript - How to pre-select checkbox in angularJs with ng-checked - Stack Overflow

admin管理员组

文章数量:1221459

I seem to cannot get this to work. So I have a bunch of genres of movies which I want them to be checked if those are the genres in user database. This is my code

%section(ng-controller="UserCtrl" ng-init="user_genres=#{preferred_genres}")
    %ul
         %li(ng:repeat="genre in preferred_genres")
            %input(type = "checkbox" ng:model="preferred_genres[genre]" id="genre-{{$index + 1}}" ng-checked="user_genres['{{genre}}']")
            %label{:for => "genre-{{$index + 1}}"} {{genre}}

And this is #{preferred_genres} from haml

{"Action & Adventure":true,"Animation":true,"Art House & International":true,"Classics":true,"Comedy":true,"Documentary":true,"Drama":true,"Horror":true,"Kids & Family":true,"Musical & Performing Arts":true,"Mystery & Suspense":true,"Romance":true,"Science Fiction & Fantasy":true,"Special Interest":true,"Sports & Fitness":true,"Television":true,"Western":true}

So that means every checkbox should be checked. But no checkbox is checked when I load the page. However if I hardcode ng-checked to be something like this it works.

ng-checked="user_genres['Western']"

This is really strange. Please help.

I seem to cannot get this to work. So I have a bunch of genres of movies which I want them to be checked if those are the genres in user database. This is my code

%section(ng-controller="UserCtrl" ng-init="user_genres=#{preferred_genres}")
    %ul
         %li(ng:repeat="genre in preferred_genres")
            %input(type = "checkbox" ng:model="preferred_genres[genre]" id="genre-{{$index + 1}}" ng-checked="user_genres['{{genre}}']")
            %label{:for => "genre-{{$index + 1}}"} {{genre}}

And this is #{preferred_genres} from haml

{"Action & Adventure":true,"Animation":true,"Art House & International":true,"Classics":true,"Comedy":true,"Documentary":true,"Drama":true,"Horror":true,"Kids & Family":true,"Musical & Performing Arts":true,"Mystery & Suspense":true,"Romance":true,"Science Fiction & Fantasy":true,"Special Interest":true,"Sports & Fitness":true,"Television":true,"Western":true}

So that means every checkbox should be checked. But no checkbox is checked when I load the page. However if I hardcode ng-checked to be something like this it works.

ng-checked="user_genres['Western']"

This is really strange. Please help.

• javascript
• ruby
• sinatra
• angularjs
• haml

Share Improve this question Follow asked Jan 8, 2013 at 23:29 toytoy 12.1k2828 gold badges100100 silver badges180180 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 15

The value of ng-checked needs to be an expression. Get rid of the {{}}. So, something like this:

 %input(type = "checkbox" ng-model="preferred_genres[genre]" id="genre-{{$index + 1}}" ng-checked="user_genres[genre]")

Also, you don't need to necessarily even have the ng-checked directive. If the value of your model is true, then it will be checked for you.

本文标签： javascriptHow to preselect checkbox in angularJs with ngcheckedStack Overflow