Javascript 使用AngularJS制作复选框

我试图使用AngularJS创建一个复选框，我发现以下代码：

按照它的步骤，我的代码是：

JS文件：

'use strict';

var app = angular.module('myApp.Carto', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/Carto', {
            templateUrl: 'Carto/carto.html',
            controller: 'CartoCtrl'
        });
    }])

app.controller('CartoCtrl', function($scope) {
    $scope.array = [];
    $scope.array_ = angular.copy($scope.array);
    $scope.list = [{
        "id": 1,
        "value": "apple",
    }, {
        "id": 3,
        "value": "orange",
    }, {
        "id": 5,
        "value": "pear"
    }];



});
app.directive("checkboxGroup", function() {
    return {
        restrict: "A",
        link: function(scope, elem) {
            // Determine initial checked boxes
            if (scope.array.indexOf(scope.item.id) !== -1) {
                elem[0].checked = true;
            }

            // Update array on click
            elem.bind('click', function() {
                var index = scope.array.indexOf(scope.item.id);
                // Add if checked
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.item.id);
                }
                // Remove if unchecked
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                // Sort and update DOM display
                scope.$apply(scope.array.sort(function(a, b) {
                    return a - b;
                }));
            });
        }
    };
});

但是，当我在浏览器中运行代码时，会出现复选框，但我无法更改复选框，这是否意味着指令不起作用？ 我不知道出了什么问题,因为我实际上刚刚复制了上面提供的链接中的代码,你能帮我解决这个问题吗?

先谢谢你

---

PS：我想它应该实现，但我仍然不知道如何或如何修复它

我认为您在模块名称上犯了一个错误。 我重新创建了您的示例代码，效果非常好：

代码：

HTML:

{{item.value}}

错误是由于bootstrap和Materialize都存在，显然两者之间存在冲突，当我删除bootstrap时，一切正常

您在控制台中看到了什么类型的错误？。您需要在html的脚本标记中链接angular库，还需要通过将模块名“checkbox”链接到html或正文来实例化angular模块tag@WildWidow控制台中没有错误，它的emptyWorks对我来说非常好：顺便说一句，我认为您混淆了模块名称。@WildWidow angular库已导入这个文件继承自index.html，在我的例子中，我没有一个名为“checkbox”的模块，我把它的代码放在模块“myApp.Carto”中，这就是为什么我在html中放了ng app=“myApp”@Matheno你有什么改变吗？当我运行你的代码时，它说：[ng:areq]参数“MyCtrl”不是一个函数，没有定义你如何声明你的模块/应用？这个错误通常在你两次声明你的应用程序时抛出。在小提琴中，它们都可以工作，但在我的项目中，我似乎不明白为什么它不能工作。它可以链接到其他东西吗？为什么它不点击？这是可能的。但我们需要查看代码的其余部分才能确定。

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.array = [];
  $scope.array_ = angular.copy($scope.array);
  $scope.list = [{
    "id": 1,
    "value": "apple",
  }, {
    "id": 3,
    "value": "orange",
  }, {
    "id": 5,
    "value": "pear"
  }];
}

myApp.directive("checkboxGroup", function() {
  return {
    restrict: "A",
    link: function(scope, elem) {
      // Determine initial checked boxes
      if (scope.array.indexOf(scope.item.id) !== -1) {
        elem[0].checked = true;
      }

      // Update array on click
      elem.bind('click', function() {
        var index = scope.array.indexOf(scope.item.id);
        // Add if checked
        if (elem[0].checked) {
          if (index === -1) scope.array.push(scope.item.id);
        }
        // Remove if unchecked
        else {
          if (index !== -1) scope.array.splice(index, 1);
        }
        // Sort and update DOM display
        scope.$apply(scope.array.sort(function(a, b) {
          return a - b
        }));
      });
    }
  }
});

<div ng-controller="MyCtrl">
  <div ng-repeat="item in list">
    <input type="checkbox" checkbox-group />
    <label>{{item.value}}</label>
  </div>
</div>