在指令中绑定Angularjs中的复选框答案

【问题标题】：Binding a checkbox in Angularjs in Directive在指令中绑定Angularjs中的复选框
【发布时间】：2015-07-22 18:23:30
【问题描述】：

我在http://plnkr.co/PF7cRQE4n5lYube8oa3t 有一个麻烦

templateUrl 指向 control.html，代码如下。

hello from Directive
<br />{{message}}
<br />
<input type="checkbox" {{checkedstatus}} />
<br />Value of Checked Status = {{checkedstatus}}

我的控制器和指令如下...

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
})
  .directive('myDir', function() {
    var linkFunction = function(scope, element, attributes){
      scope.message = "The check box should be checked... no?";
      scope.checkedstatus = "checked";
    }

    return {
      restrict: 'E',
      templateUrl: "control.html",
      link: linkFunction,
      scope: {}
    };
  })

我的 index.html 文件很简单，并且正在使用指令...

<my-dir></my-dir>

我假设如果checkedstatus 设置为“checked”，我会在UI 中看到复选框被选中。但它不会以这种方式发生并且仍然不受控制。我的目标是将此复选框用作切换按钮来查看或隐藏我的视图中的某些元素。

【问题讨论】：

试试这个模式 > vitalets.github.io/checklist-model

标签： angularjs checkbox angularjs-directive

【解决方案1】：

你可以使用ng-checked

scope.checkbox={
    checkedstatus:true
};

<input type="checkbox" ng-checked="checkbox.checkedstatus" />

或者你可以绑定模型

喜欢这个

<input type="checkbox" ng-model="checkbox.checkedstatus" />

检查 plunkr

http://plnkr.co/edit/qkWyqrLBwYKv1ECZ0WHE?p=preview

【讨论】：

我附上了plunkr的链接