angularjs的客户端数据绑定答案

【问题标题】：client side databinding with angular jsangularjs的客户端数据绑定
【发布时间】：2014-09-02 05:53:02
【问题描述】：

我得到了一段用于客户端数据绑定的 Angular js 代码。我不熟悉 Angular js。所以这里是代码

<html ng-app> 
<head> 
    <script src="scripts/angular.js"></script> 
    <script src="scripts/controller.js"></script> 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
    <title></title> 
</head> 
<body> 
    <div ng-controller="MainController"> 
        <div> 
            <h1>{{readingList.Name}}'s Reading List</h1> 
        </div> 
        <br /> 
        <div> 
            <table class="table table-bordered table-condensed" > 
                <thead> 
                    <tr> 
                        <th>Title</th> 
                        <th>IsComplete</th> 
                        <th></th> 
                    </tr> 
                </thead> 
                <tbody> 
                    <tr ng-repeat="book in readingList.Books"> 
                        <td>{{book.Title}}</td> 
                        <td>{{book.isComplete}}</td> 
                        <td><input type="checkbox" ng-model="book.isComplete" /></td> 
                    </tr> 
                </tbody> 
            </table> 
        </div> 
    </div> 
</body> 
</html>

var MainController = function ($scope) {

    var model = { 
        Name: "Madhur Kapoor", 
        Books: [{ Title: "The Hunger Games", isComplete: false }, 
                { Title: "The Alchemist", isComplete: true }, 
                { Title: "Angel & Demons", isComplete: false }, 
                { Title: "Da Vinci Code", isComplete: true }, 
                { Title: "The Godfather", isComplete: false } 
        ] 
    };

    $scope.readingList = model;

};

现在我的问题是如何选中或取消选中复选框，因为 check 属性用于选中未选中的复选框，但如果您看到代码，它看起来像 <input type="checkbox" ng-model="book.isComplete" />

如果 Angular 在运行时将检查属性添加到复选框，那么 Angular js 如何检测该控件是复选框而不是单选按钮？请帮助我了解如何将检查属性添加到复选框。很混乱。谢谢

【问题讨论】：

checkbox 绑定到与之关联的 ng-model（true 或 false） - radio 绑定到单选按钮的值。

标签： angularjs checkbox

【解决方案1】：

当您将 ng-model 分配给输入时，Angular 会检查该输入的类型并将其绑定到正确的属性。

对于复选框，它将绑定到“checked”属性。对于文本，它将绑定到基础值。

更多关于 ng-model API：https://docs.angularjs.org/api/ng/directive/ngModel

【讨论】：