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(){

    $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 type="checkbox" ng-disabled="isChecked" />

Answer 3

您可以ng-model在该复选框上添加一个并关联一个on-click函数，这样无论何时单击该复选框，该函数都会将其恢复为未选中状态。

HTML

<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-model="checkboxCheck"

         ng-click="CheckStatus()"></input>

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

  <div>{{checkboxCheck}}</div>

</div>

JS

function LoginController($scope) {

  $scope.user = {

    firstName: "Foo",

    lastName: "Bar"

  };

  $scope.logins = [];

  $scope.checkboxCheck = false;

  $scope.IsChecked = function() {

    $scope.checkboxCheck = false;

    return $scope.checkboxCheck;

  }

  $scope.login = function() {

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

  };

  $scope.CheckStatus = function() {

    $scope.checkboxCheck = false;

  }

}

这是JSFIDDLE 中的工作示例