ng-checked 在 angular 1.6 中不强制复选框保持未选中状态

Question

我有一个连接到函数的输入元素IsChecked。IsChecked总是返回 false，我希望该复选框永远不会被选中，无论它收到多少点击。相反，发生的事情是无论我的功能如何，复选框都会更改为选中和未选中。

如何根据函数调用强制复选框保持未选中状态？

<div ng-app ng-controller="LoginController">

    <div>Hello {{ user.firstName }}</div>

    <input ng-model="user.firstName"></input>

    <input type="submit" ng-click="login()" value="Login"></input>

    <input type="checkbox" ng-checked="IsChecked()"></input>

    <div ng-repeat="login in logins">{{ login }}</div>

    <div>{{IsChecked()}}</div>

</div>

function LoginController($scope) {

    $scope.user = {

        firstName: "Foo",

        lastName: "Bar"

    };

    $scope.logins = [];

    $scope.IsChecked =function(){

        return false;

    }

    $scope.login = function () {

        $scope.logins.push($scope.user.firstName + " was logged in.");

    };

}

Answer 1

您应该使用检查更改事件ng-change并使用模型传递模型以读取复选框的值ng-model。<input type="checkbox" ng-change="CheckedChanged()" ng-model="isChecked" />并让它保持不受检查 -$scope.CheckedChanged =function(){&nbsp; &nbsp; $scope.isChecked = false; // To make it remain unchecked}检查这个小提琴这样你就可以ng-checked在这种情况下省略。ng-checked并且ng-model不能一起使用。using 的一个用例ng-checked可能是，假设您正在动态创建一个复选框，并且您需要传递一个表达式来设置复选框的状态。

Answer 2

该ng-checked指令设置 acheckbox或 a的 checked 属性radiobutton。如果 ng-checked 属性中的表达式返回 true，则复选框或单选按钮将被检查。但这只是为了在开始时将其设置为未选中，下次单击它时，将选中的属性设置为 true。您应该将 a 绑定ng-model到复选框并将其始终设置为 false。或者只是通过ngDisabled向其添加属性来禁用复选框，使其不被选中。前任：<input&nbsp;type="checkbox"&nbsp;ng-disabled="isChecked"&nbsp;/>

Answer 3

您可以ng-model在该复选框上添加一个并关联一个on-click函数，这样无论何时单击该复选框，该函数都会将其恢复为未选中状态。HTML<div ng-app ng-controller="LoginController">&nbsp; <div>Hello {{ user.firstName }}</div>&nbsp; <input ng-model="user.firstName"></input>&nbsp; <input type="submit" ng-click="login()" value="Login"></input>&nbsp; <input type="checkbox" ng-model="checkboxCheck"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ng-click="CheckStatus()"></input>&nbsp; <div ng-repeat="login in logins">{{ login }}</div>&nbsp; <div>{{checkboxCheck}}</div></div>JSfunction LoginController($scope) {&nbsp; $scope.user = {&nbsp; &nbsp; firstName: "Foo",&nbsp; &nbsp; lastName: "Bar"&nbsp; };&nbsp; $scope.logins = [];&nbsp; $scope.checkboxCheck = false;&nbsp; $scope.IsChecked = function() {&nbsp; &nbsp; $scope.checkboxCheck = false;&nbsp; &nbsp; return $scope.checkboxCheck;&nbsp; }&nbsp; $scope.login = function() {&nbsp; &nbsp; $scope.logins.push($scope.user.firstName + " was logged in.");&nbsp; };&nbsp; $scope.CheckStatus = function() {&nbsp; &nbsp; $scope.checkboxCheck = false;&nbsp; }}这是JSFIDDLE 中的工作示例