Question

我得到了一段用于客户端数据绑定的角度js代码。我不熟悉角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;

};

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

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

Answer 1

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

对于复选框，它将绑定到＆＃39;已选中＆＃39;属性。对于文本，它将绑定到基础值。

有关ng-model API的更多信息：https://docs.angularjs.org/api/ng/directive/ngModel

客户端数据绑定与角js

1 个答案: