Question

我的应用程序中有以下代码：

      <input type="checkbox" ng-checked="vm.eduToEdit.test" />
      {{vm.eduToEdit.test}}
      <input type="checkbox" ng-model="vm.eduToEdit.test">

值vm.eduToEdit.test是diplaying true或false，但无论返回什么，都不会检查上面任何一个输入中的checkboes。我不知道我错过了什么，我认为我不应该使用ng-model，所以我尝试了ng-checked，但到目前为止都没有。

编辑：我尝试了以下，但结果相同：

       <input type="checkbox" ng-checked="vm.eduToEdit.test" /> - 
       <input type="checkbox" ng-checked="checking" /> - 
       {{vm.eduToEdit.test}}
       {{checking}}

在我的控制器中我有：

    vm.eduToEdit.test = true;
    $scope.checking = true;

当我查看页面时，会写出true，但我从未看到它被检查过。

以下是我的控制器：

(function () {
'use strict';

myModule.controller('EducationController', ["$scope", "bootstrappedData", EducationController]);

function EducationController($scope, bootstrappedData) {
    var vm = this;
    vm.shoppingCart = bootstrappedData.shoppingCart;
    vm.eduToEdit = {};

    vm.EditEducation = function (applicantEducationId, educationTypeId) {
        var owl = $(".owl-carousel");

        var eduFound = $.grep(this.shoppingCart, function (h) {
            return h.ApplicantEducationId === applicantEducationId;
        });
        vm.eduToEdit = eduFound[0];
        vm.eduToEdit.formattedAttendEnd = vm.ConvertToDate(vm.eduToEdit.AttendEnd);
        vm.eduToEdit.formattedAttendStart = vm.ConvertToDate(vm.eduToEdit.AttendStart);
        vm.eduToEdit.formattedGraduationDate = vm.ConvertToDate(vm.eduToEdit.GraduationDate);

        vm.eduToEdit.test = true;
        $scope.checking = true;

        switch (educationTypeId) {
            case 1:
            case 2:
            case 3:
            case 4:
                owl.trigger('to.owl.carousel', [1, 50]);
                break;
            case 5:
                owl.trigger('to.owl.carousel', [3, 50]);
                break;
            case 6:
                owl.trigger('to.owl.carousel', [2, 50]);
                break;
            case 7:
                owl.trigger('to.owl.carousel', [4, 50]);
                break;
            case 9:
                owl.trigger('to.owl.carousel', [5, 50]);
                break;
        }
    };

    vm.ConvertToDate = function (jsonDateToConvert) {
        if (jsonDateToConvert == null)
            return "";
        var value = new Date
        (
             parseInt(jsonDateToConvert.replace(/(^.*\()|([+-].*$)/g, ''))
        );
        return value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
    }
}

}）（）;

Answer 1

当您使用ng-checked时，它将充当单向绑定意味着只显示已选中或取消选中此复选框但未在控制器变量中更改。如果您想在 dom 中更改控制器变量，那么最好使用ng-model来检查或取消选中。可以尝试：

我猜您在dom中使用了controller as vm并在控制器中使用了this。

in html：

<body ng-controller="myCtrl as vm">
    <input type="checkbox" ng-model="vm.eduToEdit.test">{{vm.eduToEdit.test}}
</body>

控制器：

angular.module('myApp',[])
.controller("myCtrl", function($scope) {
  var vm = this;
  vm.eduToEdit = {};
  vm.eduToEdit.test = true;
});

DEMO LINK

Answer 2

单击第二个复选框以首先更新，因为每当您点击ng-model时，第一个复选框中的模型值都会更新。

    <input type="checkbox" ng-checked="vm.test" />
    {{vm.test}}
    <input type="checkbox" ng-model="vm.test" />

jsfiddle

angularjs复选框未被检查

2 个答案: