使用 ng-change 进行 ng-checked 无效

Question

这是我的 angularjs 代码

<label class="switch">
    <input
    type="checkbox"  
    ng-model="question.questionId" 
    ng-change="questionStatusChange(question.questionId,!question.active)" 
    ng-checked="question.active" >
    <span class="slider round"></span>
</label>

ng-change 从 unchecked 到 checked 状态触发罚款但 ng-change="questionStatusChange(question.questionId,!question.active)" 从 checked 到 unchecked 状态不工作。

我正在尝试启用或禁用 [=32=] 记录。

$scope.questionStatusChange = function(questionId,status) {
console.log(status);
}

我正在使用这个开关： https://www.w3schools.com/howto/howto_css_switch.asp

Answer 1

你的问题是 ng-model 和 ng-checked 不能一起使用。

您应该可以只使用 ng-model，并将其绑定到模型上的 boolean 属性。从你的 html 中删除 ng-checked 并只使用 ng-model.

编辑： 下面显示了如何使用 ng-repeat 创建 <input> 的列表，其中每个部分在 [=20= 中都有自己的对象].完成后，您可以使用 ng-model 并将其直接绑定到 questions[i].active。

var app = angular.module("MyApp", []);

var MyController = function($scope) {

  $scope.questions = [{
    questionId: 1,
    active: false,
    questionText: "First question"
  }, {
    questionId: 2,
    active: true,
    questionText: "Second question"
  }];
  $scope.questionStatusChange = function(currentQuestion) {
    //currentQuestion.active = !currentQuestion.active;
    console.log("Current Question Text: " + currentQuestion.questionText + "\nIs it clicked? " +  currentQuestion.active);
  }
}

app.controller(MyController, "[$scope, MyController]");

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="MyApp">
  <div ng-controller="MyController">
    <div ng-repeat="question in questions">
      <label class="switch">
        <input
        type="checkbox"  
        ng-model="question.active"
        ng-change="questionStatusChange(question)" />
        <span class="slider round"></span>
      </label>
    </div>
  </div>
</body>

</html>

使用 ng-change 进行 ng-checked 无效

ng-checked with ng-change is not working

javascript

toggle

switch-statement

angularjs