Question

我试图构建一个带有一系列复选框的表单，这些复选框表示我数据库中两个模型之间的多态关联。我有JobDescription和ExperienceLevel。表单用于更新JobDescription，并且每个ExperienceLevel都有一个复选框。当表单以模态打开时，我希望检查与作业关联的当前经验级别。

我一直在努力弄清楚如何使用ng-repeat和ng-model来实现复选框。我当前的代码呈现复选框，但没有预先选择正确的代码。

这是我控制器中的editJob方法：

$scope.editJob = function(r) {

    var experienceLevels = {};

    r.experience_levels.map(function(r, i){
        experienceLevels[i] = r.name;
    });
    $scope.experienceLevels = experienceLevels;

    $scope.id = r.id;
    $scope.title = r.title;
    $scope.jobFunction = r.role;
    $scope.description = r.description;
    $scope.postingLink = r.posting_link;
    $scope.company = r.company_name;

    var modalInstance = $modal.open({
        templateUrl: '/assets/admin/editjob.html',
        controller: ModalInstanceCtrl,
        scope: $scope,
        resolve: {
            jobForm: function () {
                return $scope.jobForm;
            }
        }
    });
};

以下是我的表单中带有复选框的部分：

<div class="form-group">
    <label>Experience Level</label>
    <div ng-repeat="experienceLevel in expItems">
        <input type="checkbox" name="experienceLevel.display" 
               ng-model="job.experienceLevels['experienceLevels']" 
               ng-true-value="experienceLevel">
        {{experienceLevel.display}}
    </div>
</div>

我仍然不确定如何预先选中复选框。他们似乎并没有与模特绑定。

Answer 1

我找到了问题的解决方案。我不知道这是不是很好的做法（会喜欢反馈），但它似乎按我想要的方式工作。

在我的控制器中，我现在预先指定经验等级：

$scope.editJob = function(r) {
    var experienceLevels = {};

    r.experience_levels.map(function(r){
        experienceLevels[r.name] = "true";
    });

在我的表单上，我决定绑定到experienceLevel.display而不是experienceLevel.key，就像这样：

<label>Experience Level</label>
<div ng-repeat="experienceLevel in expItems">
    <input type="checkbox" name="experienceLevel.display" ng-model="job.experienceLevels[experienceLevel.display]" ng-true-value="true" ng-false-value="false">
    {{experienceLevel.display}}
</div>

这给了我一个类似于下划线的参数：

{
    "id"=>"23",
    "title"=>"Ruby Ninja",
    "jobFunction"=>"Customer Support",
    "description"=>"Awesomesauce!",
    "postingLink"=>"http://www.google.com/",
    "experienceLevels"=>{
        "Entry Level"=>"false", "Manager"=>"true"
    },
    "company"=>"Ice 2 Go",
    "action"=>"update",
    "controller"=>"admin/job_descriptions",
    "job_description"=>{
        "id"=>23, "title"=>"Ruby Ninja", "description"=>"Awesomesauce!"
    }
}

然后我可以在我的Rails控制器中按名称查找ExperienceLevel。

使用ng-model预加载复选框

1 个答案: