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

Question

有兴趣

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 中看到选中的复选框。但它不会那样发生并且仍然不受控制。我的目标是使用此复选框作为切换按钮来查看或隐藏我视图中的某些元素。

Answer 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

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

Binding a checkbox in Angularjs in Directive

checkbox

angularjs

angularjs-directive