Javascript angularjs复选框未被选中_Javascript_Angularjs

Javascript angularjs复选框未被选中

javascript angularjs

Javascript angularjs复选框未被选中,javascript,angularjs,Javascript,Angularjs,我的应用程序中有以下代码： <input type="checkbox" ng-checked="vm.eduToEdit.test" /> {{vm.eduToEdit.test}} <input type="checkbox" ng-model="vm.eduToEdit.test"> 当我查看页面时，会写出true，但我从未看到它被选中下面是我的控制器： (function () { 'use strict'; myModu

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

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

当我查看页面时，会写出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();
    }
}

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" />


{{vm.test}

当您将使用

ng checked

时，它将充当单向绑定手段，仅显示选中或未选中此复选框，但不在控制器变量中更改。如果您想在dom中更改控制器变量，那么最好使用

ng model

进行检查或取消检查。你可以试试：

我猜您在dom中使用了

controller作为vm

，在controller中使用了

this

在html中：

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

查看文档）请注意，此指令不应与ngModel一起使用，因为这可能会导致意外行为。@AlonEitan第一个示例不使用ng model，不是吗？由于test的值总是true，这来自数据库，我不明白为什么第一个值没有被检查。显示了错误吗？你能分享你的控制器代码吗？不要认为它是这样工作的，也许是

ng click=“vm.eduToEdit.test=！vm.eduToEdit.test”

而不是

ng checked=“vm.eduToEdit.test”

可以工作。测试一个getter函数？请看我的更新，我有一些类似于你的东西，我看到它在你的演示中运行，不确定我遗漏了什么。您可以与

ng controller

元素共享更多控制器代码和html吗？您是否使用

ng controller=“yourCtrl as vm”

？有一段时间，消化问题发生了。尝试为

vm.eduToEdit.test=true/false分配$timeout
函数是的，我正在使用ng controller=“EducationController as vm”我尝试将复选框放在带有ng控制器的div的正下方，认为它可能超出范围，但存在相同的问题。我最初认为可能真假是以字符串的形式返回的，所以尝试手动设置它，但没有成功。我相信它不起作用的原因可能与引导有关，我们使用的是引导开关，它看起来不适合Angular，因为它需要Jquery，所以我们将研究Angular引导项目
<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;
});