ngModel 复选框未显示为已选中

Question

我在获取复选框以显示模型的正确状态 (checked/unchecked) 时遇到一些问题。我的控制器中有以下内容：

app.controller('PhotosCtrl', ['$scope', function($scope) {
    $scope.form = {};
    $scope.editPhotos = {
        token: $scope.token,
        idArray: $scope.idArray
    };
}]);

我的表单如下所示：

<form accept-charset="UTF-8" name="editPhotosForm" ng-submit="submit(editPhotos);" multipart="true" novalidate>
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" ng-model="editPhotos.token" ng-init="editPhotos.token='<%= form_authenticity_token %>'">
    <div class="results-label"><b>{{total_count}}</b> <span ng-if="total_count == 1">Photo</span><span ng-if="total_count != 1">Photos</span> Found</div>
    <div>
        <div class="col">
            <a ng-repeat="r in results" class="card result-link">
                <div class="content result">
                    <div class="caption">
                        <input type="checkbox" ng-model="idArray[r.id]">
                    </div>

                    <div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}">
                    </div>
                </div>
            </a>
        </div>
    </div>
</form>

在我的转发器元素上，我调用 ng-init="idArray[r.id] = 'false'" 为 r 中的每个项目初始化一个键 r.id = 'false'。我不知道我是否需要这样做。我试过没有它的代码，但没有任何区别。我也尝试过使用 ng-value-true 和 ng-value-false，但它们似乎对我不起作用。

我在这个问题上看到的大多数其他帖子都处理简单变量（例如 $scope.someVar = true 而不是更复杂的结构，如散列。

这是idArray的结构：

$scope.idArray = {1290: "false", 1291: "true", 1292: "true", 1293: "false", 1294: "false", 1414: "false"};

这是由我的中继器中的 ng-init 生成的，因为事先无法知道照片的 ID。

这是 results 的样子：

{
    id: 1290,
    company_id: null,
    image_url: "http://s3.amazonaws.com/mybucket/photos/images/000/001/290/original/214.JPG?1432217895"
}

Answer 1

执行以下操作

    ng-init="idArray[r.id] = 'false'"

您正在将字符串值 'false' 分配给您的对象。

你不能在你的控制器中处理它吗？

$scope.idArray = {};
for (var i = 0; i < $scope.results.length; ++i){
    $scope.idArray[$scope.results[i].id] = (i%2 == 0);
}

并删除 ng-init=""（根据 Angular 文档，这是一种不好的做法 https://docs.angularjs.org/api/ng/directive/ngInit）。

另一件事是包装复选框元素的锚元素。这会导致点击事件不会在复选框上触发，而只会在锚点上触发。

    <div class="col">
        <div ng-repeat="r in results" class="card result-link">
            <div class="content result">
                <div class="caption">
                    <input type="checkbox" ng-model="idArray[r.id]">
                </div>

                <div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}">
                </div>
            </div>
        </div>
    </div>

fiddle :

http://jsfiddle.net/patxy/wak7pwwp/

ngModel 复选框未显示为已选中

ngModel checkbox not shown as selected

checkbox

angularjs

angular-ngmodel