angularjs复选框未被选中

angularjs checkbox not getting checked

本文关键字：复选框 angularjs      更新时间：2024-05-07

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

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

值vm.eduToEdit.test是true还是false，但无论它返回什么，上面任何一个输入中的复选框都不会被选中。我不确定我遗漏了什么，我想我不应该使用ng模型，所以我尝试了ng检查，但到目前为止都不起作用。

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

       <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();
    }
}

})（）；

当您将使用ng-checked时，它将充当单向绑定意味着只显示选中或未选中此复选框，而不显示控制器变量中的更改。如果您想在dom中更改控制器变量，则最好使用CCD_ 2进行检查或取消检查。可以试试：

我猜您在dom中使用了controller as vm，在controller中使用了this。

在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;
});

演示链接

单击第二个复选框可以首先更新，因为每当您单击ng模型时，它都会与第二个框绑定，第一个框中的模型值就会更新。

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

jsfiddle

相关文章：