-1

Here is my angularjs code

<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 is triggering fine from unchecked to checked state But ng-change="questionStatusChange(question.questionId,!question.active)" is not working from checked to unchecked state.

I am trying to enable or disable a table record.

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

I am using this toggle: https://www.w3schools.com/howto/howto_css_switch.asp

Mr world wide
  • 4,696
  • 7
  • 43
  • 97
  • 1
    ng-checked OR ng-model. For ng-model you can add ng-change. Never use both on same input. – Petr Averyanov May 11 '18 at 14:05
  • @PetrAveryanov at initial loop I want it to be as "checked/unchecked" based on the value, for that reason I used ng-checked. can you please give the code example. – Mr world wide May 11 '18 at 14:09
  • Why are you binding an `id` to a checkbox with `ng-model="question.questionId"`? It seems to me like that should be somewhere else in the html, like at a ` – Jimenemex May 11 '18 at 14:27
  • i dont need ng-model but with ng change is not working without that thats the reason i wrote – Mr world wide May 11 '18 at 14:59

1 Answers1

1

Your problem is that ng-model and ng-checked are not meant to be used together.

You should be able to just use ng-model, and tie it to a boolean property on your model. Remove ng-checked from your html and just use ng-model.

EDIT: Below is shown how to use ng-repeat to create a list of <input> where each section has it's own object within $scope.questions[]. Once that's done, you can use ng-model and bind it to questions[i].active directly.

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>
Jimenemex
  • 3,104
  • 3
  • 24
  • 56