Question

我在使用复选框显示模型的正确状态（已选中/未选中状态）时遇到问题。我的控制器中有以下内容：

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.id = 'false'中的每个项初始化一个键r。我不知道我是否需要这样做。我已经尝试了没有它的代码，它没有任何区别。我也尝试过使用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 doc，这是一种不良做法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>

小提琴：

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

ngModel复选框未显示为已选中

1 个答案: