javascript - 如何使用ng-checked在angularJs中预选复选框

Question

我似乎无法让它工作。所以我有一堆电影类型，我希望检查它们是否是用户数据库中的类型。这是我的代码

%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}}

这是来自 haml 的#{preferred_genres}

{"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}

所以这意味着每个复选框都应该被选中。但是当我加载页面时没有选中复选框。但是，如果我将 ng-checked 硬编码为这样的内容，它就可以工作。

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

这真的很奇怪。请帮忙。

Answer 1

ng-checked 的值需要是一个表达式。摆脱 {{}}。所以，像这样:

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

此外，您甚至不一定要有 ng-checked 指令。如果您的模型的值为 true，则会为您检查它。